Vue子组件通信之bus事件总线方法
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