Vue学习笔记（十三）之非父子组件通信

父组件向子组件通信是通过props,子组件向父组件通信是通过$emit触发一个事件。如果是两个非父子组件，我们再用以上方法逐层通信，就会显得复杂。我们就需要一个总线bus来帮我们完成这件事。例如：
1
Vue.prototype.bus = new Vue()
把一个vue实例赋值到Vue.prototype.bus，当调用this.bus的时候，可以使用vue实例的所有特性。利用这一点，就可以轻松完成组件的通信。
现在完成一个需求，有两个不同内容的组件，当点击任何一个组件时，组件的内容都变为被点击组件的内容。
效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件通信</title>
    <script src="http://vuejs.org/js/vue.js"></script>
</head>
<body>
    <div id="root">
        <child content="Hello"></child>
        <child content="World"></child>
    </div>
    <script>
        Vue.prototype.bus = new Vue()

        Vue.component('child', {
            data: function () {
                return {
                    selfContent: this.content
                }
            },//子组件不能直接修改props的值
            props: {
                content: String
            },
            template: '<div @click="handleClick">{{selfContent}}</div>',
            methods: {
                handleClick: function() {
                    this.bus.$emit('change', this.selfContent)
                }
            },
            mounted: function() {
                this.bus.$on('change', (message) =>{
                    this.selfContent = message
                })
                //箭头函数不会改变this的指向
            }
        })

        var vm = new Vue({
            el: '#root'
        })
    </script>
</body>
</html>

FEATURED TAGS

FRIENDS