【Vue3组件通信方式】

一、vue3组件通信方式
1.props:可以实现父子组件通信，props数据是只读的，不可以修改 ，父亲给子组件数据

1.vue3中需要使用到defineProps方法去接收父组件传递过来的数据

2.defineProps是vue3提供方法，不需要引入直接使用

2.自定义事件：子组件给父组件数据

<Event  @click="handler"></Event>

Event为子组件  vue2框架当中：这种写法自定义事件，可以通过.native修饰符变为原生DOM事件
 vue3框架当中，上面这种写法即为原生DOM事件 vue3：原生的DOM事件不管是放在标签身上，组件身上都是原生DOM事件

 vue3框架当中：利用defineEmits方法返回函数触发自定义事件  defineEmits方法不需要引入直接使用  

 let  $emit=defineEmits(['xxx'])   

 $emit('xxx','数据1'，'数据2')中第一个参数：事件类型，第二个|第三个|N参数即为注入数据

3.全局事件总线

在vue3框架中，prototype属性被取消了，所以我们不再使用Vue2中的Vue.prototype. $bus=new Vue()的方式来使用全局事件总线。在vue3当中，推荐使用mitt第三方库来帮助我们实现全局事件总线

主要的命令有三个分别是emit、on、off

 emit(name,data) 
//触发事件，两个参数：name:触发的方法名，data:需要传递的参数

on(name,callback)
//绑定事件，两个参数：name:触发的方法名，callback:触发后执行的回调函数
off(name)
//解绑事件，一个参数：name:需要解绑的方法名

4.v-model实现父子组件数据同步
v-model指令：收集表单数据，数据双向绑定，也可以实现组件之间的通信，实现父子组件数据同步的业务 

v-model组件身上使用
第一：相当于给子组件传递props[modelValue]
第二：相当于给子组件绑定自定义事件update:modelValue

1.在父组件中使用v-model时，可以通过v-model:propName绑定子组件的modelValue prop和update:modelValue event。 
2.在子组件中,v-model会将modelValue prop和update:modelValue event绑定在一起，当子组件的input事件触发时会emit一个update:modelValue event，从而更新父组件的message。而在父组件中，v-model会message与modelValue  prop和update:modelValue event绑定在一起，当父组件更新message时，会通过modelValue prop将message传递给子组件，在子组件中输入内容时，会通过update:modelValue event将新的内容传递给父组件更新message。这样就实现了父子组件之间的数据同步。

这样就可以在父组件和子组件之间实现双向数据绑定。当子组件的值发生变化时，会触发 update 事件传递给父组件，父组件接收到事件后会更新自己的值并重新渲染子组件。当父组件的值发生变化时，会通过 value prop 传递给子组件，子组件接收到 prop 后会更新自己的值并重新渲染。

4.useAttrs方法
vue3框架提供了一个方法useAttrs方法

1.引入useAttrs方法：获取组件标签身上属性与事件
2.此方法会返回一个对象
3.props与useAttrs方法都可以获取父组件传递过来的属性与属性值 但是props接受了useAttrs方法就获取不到了

5.ref与$parent
ref:可以获取真实的DOM节点，可以获取到子组件实例VC
$parent:可以在子组件内部获取到父组件的实例

组件内部数据对外关闭，别人不能访问 如果想让外部访问需要通过defineExpose方法对外暴露

6.provide与inject
 vue3提供provide（提供）与inject（注入)，可以实现隔辈组件传递数据

 //祖先组件给后代组件提供数据
 //两个参数：第一个参数是提供的数据key,第二个参数是祖先提供数据
 let car=ref("法拉利")
 provide("TOKEN",car)
 //注入祖先提供数据
 //需要参数：即为祖先提供数据的key
 let car=inject('TOKEN')

7.pinia

 vuex：集中式管理状态容器，可以实现任意组件之间的通信

 核心概念：state、mutations、actions、getters、modules
pinia:集中式管理状态容器，可以实现任意组件之间的通信

核心概念：state、actions、getters

pinia写法 ：选择式API和组合式API写法

8.插槽

三种插槽：默认插槽、具名插槽、作用域插槽