Vue学习计划-Vue3--核心语法（八）组件通信

组件通信

Vue3组件通信和Vue2的区别：

• 移出事件总线，使用mitt代替。

• vuex换成了pinia。
• 把.sync优化到了v-model里面了。
• 把$listeners所有的东西，合并到$attrs中了。
• $children被砍掉了。

常见搭配形式：

1. props

概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。

• 若 父传子：属性值是非函数。
• 若 子传父：属性值是函数。

父组件：

子组件：

2. 【自定义事件】

   1. 概述：自定义事件常用于：子 => 父
   2. 注意区分好：原生事件、自定义事件
   • 原生事件
     • 事件名是特定的(click,mouseenter等等)
     • 事件对象$event：包含事件相关信息的对象(pageX,pageY,target,keyCode)
   • 自定义事件
     • 事件名称是任意名称
     • 事件对象$event:是调用emit时所提供的数据，可以是任意类型
     • 推荐使用kebab-case规范
   3. 示例：
   • 父组件

   // 给子组件绑定自定义事件
   
   
   function saveToy(val:string){
     toy.value = val
   }
   

   • 子组件

   
   传递数据
   
   // 声明自定义事件
   const emit =defineEmits(['send-toy'])
   

3. 【mitt】

• 概述：与消息订阅与发布（pubsub）功能类似，可以实现任意组件间通信
• 步骤
  1. 安装mitt：npm i mitt
  2. 新建文件：src\utils\emitter.ts:

  import mitt from 'mitt'
  // 创建emitter
  const emitter = mitt()
  
  // 绑定事件
  // emitter.on('xxx', (val)=>{
  //  console.log(val)
  // }) 
  
  // 触发事件
  // emitter.emit('xxx', data)
  
  // 解绑事件
  // emitter.off('xxx')
  
  // 清空事件
  // emitter.all.clear()
  
  export default emitter
  

  3. 接收数据组件中：绑定事件、同时在销毁前解绑事件：
  4. 提供数据的组件中，在合适的时机触发事件：

4. 【v-model】

   1. 概述：实现 父↔子 之间相互通信。
   2. 前序知识 —— v-model的本质
   3. 组件标签上的v-model的本质：:moldeValue ＋ update:modelValue事件。

   父组件中：

   自定义组件中

   4. v-model后面跟自定义名称, 相当于别名，这样的话可以使用多次v-model

   父组件中：

   子组件中：

5. 【$attrs】

   1. 概述：$attrs用于实现当前组件的父组件，向当前组件的子组件通信（祖→孙）。
   2. 具体说明：$attrs是一个对象，包含所有父组件传入的标签属性。

   注意：$attrs会自动排除props中声明的属性(可以认为声明过的 props 被子组件自己“消费”了)(相当于：组件中没被defineProps声明接收的属性)

   父组件

   子组件

   孙组件

6. 【$refs、$parent】

   1. 概述：
      • $refs用于 ：父→子。
      • $parent用于：子→父。
   2. 原理如下：

   属性	说明
   $refs	值为对象，包含所有被ref属性标识的DOM元素或组件实例。
   $parent	值为对象，当前组件的父组件实例对象。

   3. 示例：
   • Father.vue
   • Child1.vue
   • Child2.vue

7. 【provide、inject】

   1. 概述：实现祖孙组件直接通信
   2. 具体使用：
   • 在祖先组件中通过provide配置向后代组件提供数据
   • 在后代组件中通过inject配置来声明接收数据
   3. 具体编码：
      【第一步】父组件中，使用provide提供数据

   注意：子组件中不用编写任何东西，是不受到任何打扰的

   【第二步】孙组件中使用inject配置项接受数据。

   inject接收两个参数，第一个参数是provide提供的数据名称，第二个参数是默认值（假如未找到provide提供的数据名称就触发）