vue实现组件通信的5中方式

通信种类

1)父组件向子组件通信
2)子组件向父组件通信
3)隔代组件间通信
4)兄弟组件间通信

1、props

1)通过一般属性实现父向子通信
2)通过函数属性实现子向父通信

父组件

<Screenfull :getScreenfullInfo="getScreenfullInfo" />

methods: {
        // 全屏事件，子传父，通过通过父组件给子组件传递函数类型的props方式
        getScreenfullInfo(res) {
            this.isFullscreen = res;
        }
}

子组件

props: ['getScreenfullInfo'],

methods: {
change() {
     this.isFullscreen = screenfull.isFullscreen;
     // 子传父，子组件调用父组件提供的函数，通过通过父组件给子组件传递函数类型的props方式
     this.getScreenfullInfo(this.isFullscreen);
},

3)缺点:隔代组件和兄弟组件间通信比较麻烦

2、vue自定义事件

1)vue内置实现，可以代替函数类型的props
a.绑定监听:<MyComp @eventName=“callback”
b.触发(分发)事件: this.$emit( “eventName”, data)
2)缺点:只适命于子向父通信

3、消息订阅与发布

1)需要引入消息订阅与发布的实现库，如: pubsub-js
a.订阅消息:PubSub.subscribe( ‘msg’, (msg, data)=>{})
b.发布消息:PubSub.publish(‘msg’, data)
2)优点:此方式可用于任意关系组件间通信

4、vuex

1)是什么:vuex是 vue官方提供的集中式管理vue多组件共享状态数据的vue插件
2)优点:对组件间关系没有限制，且相比于pubsub 库管理更集中，更方便

5、slot

1)是什么:专门用来实现父向子传递带数据的标签
a.子组件
b.父组件
2)注意:通信的标签模板是在父组件中解析好后再传递给子组件的