vue3-组件通信

Vue3组件通信和Vue2`的区别：

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

• vuex换成了pinia

• 把.sync优化到了v-model里面

• 把$listeners所有的东西，合并到$attrs

• $children被移除

  

自定义事件(与vue2语法差异)

自定义事件常用于子组件向父组件传递数据

原生事件:特点的click、hover等

自定义事件:事件名是任意名称，事件对象$event: 是调用emit时所提供的数据，可以是任意类型

1. 在子组件声明自定义事件

   // 使用defineEmits在子组件声明一个test自定义事件 // 参数是一个数组，可以包含多个自定义事件 const emit = defineEmits(["test"]) 

2. 在父组件绑定自定义事件

     <!-- 在父组件的子组件标签里面，绑定test事件，触发getInfo回调 --> <!-- 回调函数在父组件中 -->   <UserInfo @test="getInfo"></UserInfo> 

3. 在子组件触发自定义事件

   // 在子组件中主动触发自定义事件 // 触发事件的名称，要传递的数据 emit("test",100) 

mitt

与消息订阅与发布（pubsub）功能类似，可以实现任意组件间通信

1. 安装mitt

   npm i mitt 

2. 创建mitt

   //  src/utils/emitter.ts  // 引入 import mitt  from "mitt";  // 创建emitter,emitter可以绑定、触发事件 const emitter = mitt()  export default emitter   

3. 绑定事件

   // 要绑定的事件名，和处理的回调方法 emitter.on("test1",(value)=>{   console.log("on test1"，value) }) 

4. 触发事件

   // 要触发的组件名和传递的参数，在任意地方触发，所有绑定了对应事件的地方都会收到 emitter.emit("test1", 6666) 

5. 查看全部事件

   emitter.all 

6. 解绑指定事件

   emitter.off("test1") 

7. 清理全部事件

   emitter.all.clear() 

8. 在接收数据的组件中，组件销毁之前解绑事件

   // 生命周期钩子 onUnmounted(()=>{   // 解绑事件   emitter.off('test') }) 

v-model(与vue2实现区别)

实现父组件、子组件直接互相通信

1. v-model的原理

   <!-- 实现双向绑定--> <input type="text" v-model="user">  <!-- v-model的本质是:先单向绑定user，然后有输入事件的时候，再将user赋值为输入的数据 --> <input    type="text"    :value="user"    @input="user =(<HTMLInputElement>$event.target).value" > 

2. 组件标签上的v-model

   <!--  单纯v-model无法实现和子组件双向绑定 --> <UserInfo v-model="user"></UserInfo>  <!-- 本质是: modelValue单向绑定数据到页面的显示，数据变化的时候 将user赋值为传递的数据  --> <UserInfo :modelValue="user" @update:model-value="user = $event" ></UserInfo>   <!--  user=$event的解释 原生事件:$event是事件对象，target.value就是对应的值 自定义事件，$event就是触发事件是所传递的值 -->   

   父组件和子组件双向通信：

   <UserInfo v-model="user"></UserInfo> 

   在子组件中

   // 接收v-model的modelValue defineProps(["modelValue"])  // 声明事件 const emit = defineEmits(['update:model-value']) 

   <!-- value是props接收的modelValue，触发输入事件的时候，触发emit触发update，值是event.target.value-->  <input type="text" :value="modelValue" @input="emit('update:model-value',(<HTMLInputElement>$event.target).value)">  

3. 修改modelValue

   <!-- :test 相当于不再使用modelValue传递数据，而是使用test  --> <UserInfo v-model:test="user"></UserInfo>  <!-- 该方式一个表情上可以绑定多个不同的数据 --> <UserInfo v-model:test="user" v-model:test2="user2"></UserInfo> 

   // 接收 defineProps(["test","test2"])  // 声明 const emit = defineEmits(['update:test','update:test2']) 

   <input type="text" :value="test" @input="emit('update:test',(<HTMLInputElement>$event.target).value)"> 

$attrs

$attrs用于实现当前组件的父组件，向当前组件的子组件通信（祖→孙）

$attrs是一个对象，包含所有父组件传入的标签属性,会自动排除props中声明的属性(可以认为声明过的 props 被子组件自己消费了)

1. 父组件

   <!-- 向子组件以props的形式传递 list 和user-->  <UserInfo :list="list" :name="user"></UserInfo> 

2. 当前组件

   props只接收了name

   // 当前组件只接受了name defineProps(["name"]) 

   使用attrs将没有接收的数据，向子传递

     <Info v-bind="$attrs"></Info> 

3. 子组件

   // 祖先传递的props，父组件没有接收，通过attrs，在孙组件使用props接受 // 如果在父组件props使用了，则子组件接收不到 defineProps(['list']) 

4. 可以在祖先中实现一个方法，传递给子孙，子孙中触发，实现子孙向祖先传递数据

$refs

$refs用于 ：父向子传递数据

• 值为对象，包含所有被ref属性标识的DOM元素或组件实例

1. ref属性

     <UserInfo ref="userObj "></UserInfo> 

   // 通过该方法可以获取子组件实例对象，进行对应的操作，在子组件要进行defineExpose操作，将数据交给外部 let userObj = ref()  

2. $refs

   // 回调函数，触发的地方参数传递$refs function getAll(v){   // v是一个对象，包含所有有ref属性的子组件实例、DOM元素   console.log(v) } 

   <!-- 参数传递$refs -->  <button @click="getAll($refs)"></button> 

$parent

$parent用于：子向父传递数据

• 值为对象，当前组件的父组件实例对象

1. 父组件中，使用defineExpose将允许子操作的数据暴露出去

2. 子组件

   // 回调函数，parent需要传递$parent function getAll(parent){   // parent是一个对象，是当前组件的父组件的实例   console.log(parent) } 

   <!-- 参数传递$parent -->  <button @click="getAll($parent)"></button> 

provide和inject

实现祖孙组件直接通信，不需要通过中间组件

1. 在祖先中通过provide配置向后代组件提供数据

   import {provide} from 'vue' // 给子孙提供的key、Value provide("user",user) // 也可以value传递一个对象，批量传递数据，也可以传递方法 

2. 在所有后代中都能通过inject配置声明接收的数据

   import {inject} from 'vue' // 接收祖先中传递的user let user = inject("user") 

插槽(部分语法区别)

默认插槽

1. 父组件中编写代码

   <!-- 在组件标签中嵌套代码-->   <UserInfo>     <p>hello world</p>        </UserInfo>  

2. 子组件

   <template>   <!-- 在子组件中，合适的地方使用slot，决定代码显示在哪里， 如果父没有嵌套代码，则会显示默认内容-->   <slot>    <p>default</p></slot>  </template> 

具名插槽

使用名字定义、使用插槽，可以插入多段不同名字的插槽代码

如果不定义名字，默认插槽的名字默认是default，在组件中使用多个默认擦嘴，因为都是default，会有数量问题

1. 给插槽定义名字

     <UserInfo>     <!--    v-slot 只能卸载组件标签和template -->     <template v-slot:p-message>       <p>hello world</p>      </template>    </UserInfo> 

   <!-- 简写方式  使用#代替 v-slot-->  <template #p-message> 

2. 子组件使用

     <slot name="p-message"></slot> 

作用域插槽

数据在组件的自身，数据生成的结构由组件的使用者来决定

1. 子组件

   <!--  listData是子组件的数据 使用该方式，将listData传递到父组件 --> <slot :listData='listData'></slot> 

2. 父组件

   <!--  如果又有名字又有参数，v-slot:插槽名字=参数名 -->   <template v-slot="params"> 			<!--       params是自定义接收的名称，是一个对象 -->                <!-- 怎么使用数据、什么结构，由父组件决定-->        <ul>          <li v-for=" data of params.ListData" :key="data.id">{{data.name}}</li>        </ul>      </template>