vue3：24—组件通信方式

目录

1、props 

2、自定义事件 （emit）

3、mitt（任意组件的通讯）

4、v-model【封装ui组件库用的多，平时用的少。和vue2有点不同】

5、$attrs 

 6、$refs和$parent

 7、provide和inject

8、pinia（即vue2中的vuex）

9、插槽

默认插槽

具名插槽

作用域插槽（ui组件库用得多）

​10、总结

---

1、props 

子组件也可以如下调用父组件的方法

2、自定义事件 （emit）

父组件：@send-toy='saveToy'

子组件：接收：const emit = defineEmits(['send-toy'])

              调用：emit('send-toy',参数)

3、mitt（任意组件的通讯）

1.  pubsub

2.  $bus
3.  mitt

• 接收数据的:提前绑定好事件(提前订阅消息)
• 提供数据的:在合适的时候触发事件发布消息)

安装mitt

npm i mitt -S

 utils/emitter.ts

import mitt from 'mitt'

//调用mitt得到emitter,emitter能绑事件、触发事件
const emitter = mitt()

/**
 * 
 * //绑定事件
emitter.on('test1',()=>{
    console.log('被调用')
})
//触发事件
setTimeout(()=>{
    emitter.emit('test1')
},1000)

setTimeout(()=>{
    emitter.off('test1')
    emitter.all.clear()//全部解绑
},3000)
 */

export default emitter

子组件中单独引入使用。【另一种方法时：添加到全局变量中，也是可以的，这里只单独引入了一下】 

4、v-model【封装ui组件库用的多，平时用的少。和vue2有点不同】

父组件

子组件：myInput.vue

 vue内置的属性是modelValue,不想用这个属性，怎么办？ v-model:自己想要的属性名  

如下：

这意味着我们可以在组件标签上多次使用v-model 

$event到底是啥?啥时候能.target

• 对于原生事件，$event就是事件对象 =====>能.target
• 对于自定义事件，$event就是触发事件时，所传递的数据==>不能.target

5、$attrs 

和vue2中的$attrs一样，都是实现 祖组件 和 子/孙组件 相互传递数据。$attrs都排除了props中声明的属性。

祖：

祖组件可以这么写：

子组件可以这么写：

孙组件中可以这么写: 

 6、$refs和$parent

父组件 

子组件(child1.vue和child2.vue几乎一样，下面就只写一个)

注意：为何上面的代码【parent.house】后面没有加【.value】。原因如下

 7、provide和inject

真正的祖孙之间通信。不需要中间组件

祖组件

 孙组件

8、pinia（即vue2中的vuex）

参考之前的文章

9、插槽

默认插槽

具名插槽

写法1：v-slot:name

 写法2： 简写方式 #name

作用域插槽（ui组件库用得多）

场景：数据在子组件，子组件需要把数据传给父组件。子组件的dom结构由父组件决定

作用域插槽也可以有名字

10、总结