Vue子组件通信之bus事件总线方法

分类：代码日期：2021-07-29

vue.js

Vue 子组件通信常用的方法有两种，一种是 bus 事件总线方法，一种是使用 Vuex。bus 事件总线方法适用于小型简单的项目，Vuex 适用于大型复杂项目。下面详细介绍 bus 事件总线方法。

父组件：

<div id="app">
    <child-one></child-one>
    <child-two></child-two>
</div>

<script src="vue.min.js"></script>
<script src="child-one.js"></script>
<script src="child-two.js"></script>

子组件一：

var child = Vue.component('child-one', {
    template: `<p @click="handleClick">子组件一：我的名字叫 {{ name }} <span>（点击修改组件二的名字）</span></p>`,
    data: function () {
        return {
            name: 'Tom'
        }
    },
    mounted: function () {
        var _this = this
        // 接收一个名为【change_one_name】的事件
        this.bus.$on('change_one_name', function (val) {
            _this.name = val
        })
    },
    methods: {
        handleClick() {
            // 发送一个名为【change_two_name】的事件
            this.bus.$emit('change_two_name', 'Lucy')
        }
    }
})

子组件二（和子组件一几乎是一样的）：

var child = Vue.component('child-two', {
    template: `<p @click="handleClick">子组件二：我的名字叫 {{ name }}，<span>（点击修改组件一的名字）</span></p>`,
    data: function () {
        return {
            name: 'Lili'
        }
    },
    mounted: function () {
        var _this = this
        // 接收一个名为【change_two_name】的事件
        this.bus.$on('change_two_name', function (val) {
            _this.name = val
        })
    },
    methods: {
        handleClick() {
            // 发送一个名为【change_one_name】的事件
            this.bus.$emit('change_one_name', 'Lilei')
        }
    }
})

查看演示

标签：Vue.js