【上海校区】面试题之组件通信 - 黑马程序员技术交流社区

父传子 - 在组件标签上通过自定义属性的形式: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'

})