Vue——组件间常用通信方式详解

文章目录

• 前言
• 一、props 
• 二、自定义事件
• 三、全局事件总线
• 四、订阅与发布
• 总结

---

一、props 

  1.应用场景  

用于父组件给子组件传递数据。

  2.使用用法  

在父组件内已注册并使用的子组件 School

 <School  :sex="女" :age="age"></School>

注意：

• 可引用表达式，否则就是字符串。
• 在子组件中写所要传递的值

  3.注意   

Vue规定prop都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。如果需要添加值需用$set方法

 4.声明形式  

在子组件 School 中使用 props 接收数据

4.1 简单声明

props: ['realname','sex','age'],//第一种：简单声明

4.2  指定名称与类型

props: {

       realname: String,

       sex:String,

       age:Number

}

4.3  类型+必填+默认值

props: {

                        realname: {

                                type: String,

                                default: '无姓名',

                                required:true

                        },：用于父组件给子组件传递数据

sex: {

                                type: String,

                                default: '男'

                },

                age: {

                                type: Number,

                                required:true,

                                default:30,

                }

}

二、自定义事件

  1.应用场景  

可利用自定义事件实现子组件给父组件传递数据。

  2.使用用法  

在父组件中给子组件绑定一个自定义事件，事件的回调停留在父组件中，在子组件使用this.$emit调用，触发该事件回调。

  2.1 绑定事件  

在父组件中给子组件绑定一个自定义事件

 <!--Student是子组件，sendName：事件名称，getName：回调函数-->

<Student @sendName="getName"/>  

事件的回调停留在父组件中

methods:{
getName(value){
this.name = value;
}
}

在子组件使用this.$emit调用，触发该事件回调。

第一个参数为：事件名称，

第二个参数：传递的数据不传参数就是单纯的触发父组件对应的函数。

School组件代码

methods: {
         pressBtn() {
             // 调用自定义事件
    this.$emit('sendName',this.name);
      }
},

  3.为子组件添加ref  

3.1 添加ref 的原因

访问子组件实例或子元素,尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 特性为这个子组件赋予一个 ID 引用。

3.2  传递数据的格式

给子组件添加ref=”student”，用$on的方式添加,第一个参数：名称，第二个参数：回调函数。

mounted() {

        this.$refs.student.$on("sendName",this.getName);

}

3.3 注意 

1:   如果子组件调用原生事件 需要添加native，否则会当成自定义组件，

如：@click.native="show"

2：$once，只执行一次。

  4. 事件解绑  

4.1 解绑一个事件

this.$off(‘xxxx’ )    xxxx：事件名称

4.2  解绑多个事件

 this.$off([‘x1’,’x2’])   使用数组的形式。

4.3  解绑所有事件

this.$off()

4.4  销毁组件实例

this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。

三、全局事件总线

  1.应用场景  

适用于任意组件通信

  2.使用方法  

2.1 安装全局事件总线

在入口文件main.js中，给VM添加$bus，任意组件都可以在原型中调用。

beforeCreate(){

          Vue.prototype.$bus  = this

}

2.2 组件间的使用方法

发送数据的组件: 使用 this.$bus.$emit('事件名',所要传递的值）

例如：在点击某一按钮时将数据发送给另一组件

  methods:{
        addShopCar( ){
           if(this.goodsInfo.goodsName !=''  && this.goodsInfo.goodsPrice !=''){
             this.$bus.$emit('sendtomain',this.goodsInfo);
           }else{
            alert('添加购物车失败!');
           }
           this.goodsInfo.goodsName = '';
           this.goodsInfo.goodsPrice = '';
        }
    }

接收数据的组件:  使用 this.$bus.$on('发送数据组件中的事件名'，（data）=>{

          // 此处的data为所传递的值

}）

 mounted( ){
        this.$bus.$on('sendtomain',(data)=>{
           this.goodsList.unshift({ id: new Date( ).getTime( )+Math.round(Math.random()*10),
            title: data.goodsName, price: data.goodsPrice, num: 1, checked: false })
        });
}

组件销毁之前卸载自定义事件

beforeDestroy() {
      this.$bus.$off('getName')
}

四、订阅与发布

  1.应用场景  

一种组件间通信的方式，适用于任意组件间通信，如今有很多消息订阅与发布的包，在这里只介绍一种，pubsub-js。

  2.使用方法  

2.1 安装插件 pubsub-js

安装pubsub：npm i pubsub-js

在入口文件main.js中，给VM添加$bus，任意组件都可以在原型中调用。

beforeCreate(){

          Vue.prototype.$bus  = this

}

 2.2  发布消息

在所要使用的组件中引入pubsub:

import pubsub from 'pubsub-js'

发布消息

pubsub.publish('hello','hello-world')   hello：发布消息的名称，第二个参数：为发布内容

  methods:{
        addShopCar( ){
          pubsub.publish('sendName',this.name);
        }
    }

2.3  接收消息

在所要使用的组件中引入pubsub:

import pubsub from 'pubsub-js'

每次接收消息的时，会生成一个订阅的ID

Mounted( ) {

this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
          console.log(this)
 // console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
})
}

2.4 取消订阅

beforeDestroy() {
        // this.$bus.$off('hello')
         pubsub.unsubscribe(this.pubId)
},

---

总结

以上就是今日所要分享的内容，关于组件间的通信方式除了本文分享还有其他方式，在这里就不一一赘述，任意组件通信的方式还有一种常见的方式 Vuex，因为这一部分的内容比较重要，我会单独整理写一篇讲解，感兴趣的朋友可以关注一下。

好了，就此停笔，最后依旧诚挚祝福看到这篇文章的你健康幸福、平安喜乐。