组件通信

父传子：

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

[JavaScript] 纯文本查看 复制代码

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

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

[JavaScript] 纯文本查看 复制代码

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

兄弟：
可以借助于父组件作为中转完成通信 子 > 父 > 子


中央通信：
目前中央通信是解决组件通信的最佳方法。
无需关注组件嵌套层级，也无需关注组件关系、
$emit - 完成发布
$on - 监听订阅

[JavaScript] 纯文本查看 复制代码

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

组件通信

父传子：

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

[JavaScript] 纯文本查看 复制代码

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

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

[JavaScript] 纯文本查看 复制代码

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

兄弟：
可以借助于父组件作为中转完成通信 子 > 父 > 子


中央通信：
目前中央通信是解决组件通信的最佳方法。
无需关注组件嵌套层级，也无需关注组件关系、
$emit - 完成发布
$on - 监听订阅

[JavaScript] 纯文本查看 复制代码

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