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

我就是我 2023-10-06 17:54 16阅读 0赞

## 通信种类 ##

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)注意:通信的标签模板是在父组件中解析好后再传递给子组件的