打赏

Vue 组件通信（组件间通信）

1、中央事件总线bus

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <p>{{message}}</p>
            <my-component></my-component>

        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            var bus = new Vue();
            Vue.component('my-component', {
                template: `<button @click="handleEvent">传递事件</button>`,
                methods: {
                    handleEvent: function() {
                        bus.$emit('on-message', '来自组件my-component的内容')
                    }
                }
            })
            new Vue({
                el: "#app",
                data: {
                    message: ''
                },
                mounted: function() {
                    var _this = this;
                    //监听来自bus实例的事件
                    bus.$on('on-message', function(msg) {
                        _this.message = msg;
                    })
                }
            })
        </script>
    </body>

</html>

2、父链

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <p>{{message}}</p>
            <my-component></my-component>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component('my-component', {
                template: `<button @click="handleEvent">通过父链修改数据</button>`,
                methods: {
                    handleEvent: function() {
                        this.$parent.message = '来自组件my-component的内容'
                    }
                }
            })
            new Vue({
                el: "#app",
                data: {
                    message: ''
                }
            })
        </script>
    </body>

</html>

注：尽量少用，父子组件最好通过props和$emit来通信。

 

3、子组件索引

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <button @click="handleRef">获取子组件内容</button>     
            <p>父组件：{{message}}</p>
            <my-component ref='comA'></my-component>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component('my-component', {
                template: '<div>子组件</div>',
                   data:function(){
                       return {
                           message:'子组件内容'
                       }
                   }
            });
            new Vue({
                el: "#app",
                data:{
                    message:''
                },
                   methods:{
                       handleRef:function(){
                           var msg = this.$refs.comA.message;     
                           this.message = msg;
                       }
                   }
            })
        </script>
    </body>

</html>

注：仅仅作为直接访问子组件的应急方案，避免在模板或者计算属性中使用$refs.

posted @ 2017-12-18 16:00  孟繁贵  阅读(287)  评论(0)  编辑  收藏  举报
TOP