dowebok

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

分类:教程 日期: 点击(584) 评论(0)

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')
        }
    }
})

查看演示

标签:

相关文章