组件间通信

组件间通信

Vue2

1、pops属性（父传子）

• 功能：让组件接收外部传过来的数据

1. 传递数据：
2. 接受数据：
   • 第一种（只接收）：pops:[‘name’]
   • 第二种（限制类型）：props：{ name: String }
   • 第三种（限制类型、限制必要性、指定默认值）：

props:{
    name:{
        type:String, //类型
        required: true, //必要性
        default: '老王' //默认值
    }
}

备注

​ props是只读的，Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制 props的内容到data中一份，然后修改data中的数据

注意

若前端想传进来的是一个数字或者一个对象等非字符串的形式，则要在<Student v-bind:name="xxx"> 属性上加前**v-bind**，或者是使用冒号代替

2、自定义事件（子传父）

1. 一种组件间通信的方式，适用于：子组件 === > 父组件

2. 使用场景：A是父组件，B是子组件，B享给A传数据，那么就要在A中给B帮i的那个自定义事件（事件的回调在A中）

3. 绑定自定义事件：

   1）第一种方式：在父组件中：<Demo @robber=“test”/> 或

   2）第二种方式：在父组件中：

   <Demo ref="demo"/>
   .....
   mounted(){
   	this.$refs.xxx.$on('robber', this.test)
   }
   

   3）若想让自定义事件只能触发一次，可以使用once 修饰符，或$once方法

4. 触发自定义事件：this.$emit(‘robber’, 数据)

5. 解绑自定义事件：this.$off(‘robber’)

6. 组件上也可以绑定原生DOM事件，需要使用native修饰符

7. 注意通过this.$refs.xxx.$on(‘robber’, 回调)绑定自定义事件时，回调要么配置在method中，要么用箭头函数，否则this指向会出问题

3、全局事件总线（兄弟间通信）

$bus

1. 一种组件间通信的方式，适用于任何组件间通信，

2. 安装全局事件总线：

   new Vue({
       .....
       beforeCreate(){
       	Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vue
   	}
   	.....
   })
   

3. 使用事件总线：

   1）接受数据：A组件想接受数据，则在A组件总给$bus绑定自定义事件，事件的回调留在A组件自身。

   mounted(){
       this.$bus.$on('robber', (data)=>{
           csl(data);
       })
   }
   

   2）提供数据：this.$bus.$emit(‘xxxx’, 数据)

   methods:{
       sendStudentName(){
           this.$bus.$emit('robber', this.name)
       }
   }
   

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用的事件

消息订阅

1. 一种组件间通信的方式，适用于任何组件间通信\

2. 使用步骤：

   1）安装pubsub：npm i pubsub-js

   2）引入：import pubsub from 'pubsub-js'

   3）接受数据：A组件想接受数据，则在A组件中订阅消息，订阅的回调留在A组件自身

   methods(){
       demo(data){....}
   }
   .....
   mounted(){
       this.pid = pubsub.subscribe('robber', this.demo) //订阅消息
   }
   

   4）提供数据：pubsub.publish('robber', 数据)

   5）最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅

Vue3

1、defineProps（父传子）

• 在vue3的 setup 语法糖中，我们使用 defineProps 来定义父组件传递的props

  //父组件
  <Son :list="list"></Son>
  
  //子组件
  defineProps({
  	list:{
  		type: Array,
  		require: true,
  		default: []
  	}
  })
  
  

2、defineEmit（子传父）

• 在vue3的 setup 语法糖中，我们使用 defineEmit 来存放向父组件需要通知的一些方法

  //子组件
  const emits = defineEmit(["sendData"])
  emits('sendData', list)
  
  //父组件
  <Son @sendData="getData" />
  function getData(data){
      csl(data)
  }
  

3、defineExpose

• defineExpose 可以通过子组件允许向外暴露的方法，供父组件通过 sonRef.value.方法 使用。

//子组件
defineExpose({
    getData
})

//父组件
<Son ref="sonRef">
sonRef.value.getData()

neExpose可以通过子组件允许向外暴露的方法，供父组件通过 sonRef.value.方法` 使用。

//子组件
defineExpose({
    getData
})

//父组件
<Son ref="sonRef">
sonRef.value.getData()