Vue组件详解---非父组件之间的组件通信

官网描述：

图形实例：

不废话 看代码 小栗子：

 <div id="app" style="border:2px solid green;height:400px;">
        <my-acomponent></my-acomponent>
        <my-bcomponent></my-bcomponent>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <script>
        Vue.component('my-acomponent', {
            template: '<div><button @click="handel">点击我向B组件传递数据</button></div>',
            data: function() {
                return {
                    aaa: '我是a组件的内容'
                }
            },
            methods: {
                handel: function() {
                    this.$root.bus.$emit('lalala', this.aaa)
                }
            }

        })
        Vue.component('my-bcomponent', {
                template: '<div></div>',
                created: function() {
                    // a组件在实例创建的时候就监听事件-----lalalal事件
                    this.$root.bus.$on('lalala', function(value) {
                        alert(value)
                    })
                },

            })
        var app = new Vue({
            el: '#app',
            data: {
                // bus中介
                bus: new Vue(),
            
            },


        })
    </script>

父链：this.$parent

<div id="app" style="border:2px solid green;height:400px;">
       
        <child-component ></child-component>
        <br> {{msg}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <script>
            // 父链
        Vue.component('child-component', {
            template: '<button @click="setfatherData">点击我修改父亲的内容</button>',
            data: function() {
                return {
                    msg: '我是c中的msg'
                }
            },
            methods: {
            //点击事件
                setfatherData: function() {
                    // 子组件通过 父链 this.$parent 修改父组件的内容
                    this.$parent.msg = '已经修改了数据'
                }
            }

        })
        var app = new Vue({
            el: '#app',
            data: {
                // bus中介
                bus: new Vue(),
                msg: '数据还未修改',
            },
        })
    </script>

子链：this.$refs

提供了为子组件提供索引的方法，用特殊的属性ref为其增加一个索引
小栗子：

<div id="app" style="border:2px solid green;height:400px;">
        <my-acomponent ref="a"></my-acomponent>
        <my-bcomponent ref="b"></my-bcomponent>
        <hr>
        <child-component ref="c"></child-component>
        <br> {{msg}}
        <hr>
        <br>
        <button @click="geichildData">点击我拿子组件中的内容</button>------{{fromchild}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <script>
        Vue.component('my-acomponent', {
            template: '<div><button @click="handel">点击我向B组件传递数据</button></div>',
            data: function() {
                return {
                    aaa: '我是a组件的内容',
                    msg: '我是a中的msg'
                }
            },
            methods: {
                handel: function() {
                    this.$root.bus.$emit('lalala', this.aaa)
                }
            }

        })
        Vue.component('my-bcomponent', {
                template: '<div></div>',
                data: function() {
                    return {
                        msg: '我是b中的msg'
                    }
                },
                created: function() {
                    // a组件在实例创建的时候就监听事件-----lalalal事件
                    this.$root.bus.$on('lalala', function(value) {
                        alert(value)
                    })
                },

            })
            // 父链
        Vue.component('child-component', {
            template: '<button @click="setfatherData">点击我修改父亲的内容</button>',
            data: function() {
                return {
                    msg: '我是c中的msg'
                }
            },
            methods: {

                setfatherData: function() {
                    // 子组件通过 父链 this.$parent 修改父组件的内容
                    this.$parent.msg = '已经修改了数据'
                }
            }

        })
        var app = new Vue({
            el: '#app',
            data: {
                // bus中介
                bus: new Vue(),
                msg: '数据还未修改',
                fromchild: '还未拿到数据'
            },
            methods: {
                geichildData: function() {
                    // 用来拿子组件中的内容 
                    this.fromchild = this.$refs.a.msg
                }
            }


        })
    </script>