一、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.插槽
三种插槽:默认插槽、具名插槽、作用域插槽