vue组件通信

组件通信

• 父传子
  父传子 - 在组件标签上通过自定义属性的形式:list="list1"绑定数据，然后在子组件中通过props接收`props:[“list”]

// 组件标签 - 父组件
<custom-select :list="list1"></custom-select>
// 子组件接收
props: [ 'list' ],

• 子传父
  在子组件中通过this.$emit('自定义事件名称', '要传递的数据')，完成子组件配置
  在子组件的组件标签上通过@自定义事件名称="事件处理函数"，来完成父组件接收的任务

// 子组件 - 发布
this.$emit('receive', val) // 第一个参数：“自定义事件名称”；第二个参数：你要传递的数据
// 父组件 - 接收
<list @receive="changeVal"></list>

• 兄弟
  可以借助于父组件作为中转完成通信 子 > 父 > 子
• 中央通信
  目前中央通信是解决组件通信的最佳方法。
  无需关注组件嵌套层级，也无需关注组件关系、
  $emit - 完成发布
  $on - 监听订阅

let bus = new Vue() // 空实例
// 组件A
Vue.component('Aaa', {
    template: `我是A组件`,
    methods: {
        aaa() {
            bus.$emit('is-selected')
        }
}
});
// 组件B
Vue.component('Bbb', {
    template: `我是B组件`,
    created() {
        bus.$on('is-selected', function () {
        console.log('我是B组件');
    })
}
});
//Vue实例
new Vue({
    el: '#app'
})

OK这就是组件通信，如果还有那些不懂的可以留言哦！