网站开发量,凡科官网免费制作,上海嘉定,做网站推广有什么升职空间vue3组件通信#xff08;组合式API#xff09;
vue3组件通信#xff0c;采用组合式API。选项式API#xff0c;参看官网
Vue3组件通信和Vue2的区别#xff1a;
移出事件总线#xff0c;使用mitt代替。
vuex换成了pinia。把.sync优化到了v-model里面了。把$listeners所…vue3组件通信组合式API
vue3组件通信采用组合式API。选项式API参看官网
Vue3组件通信和Vue2的区别
移出事件总线使用mitt代替。
vuex换成了pinia。把.sync优化到了v-model里面了。把$listeners所有的东西合并到$attrs中了。$children被砍掉了。
常见搭配形式
6.1. 【props】
概述props是使用频率最高的一种通信方式常用与 父 ↔ 子。
若 父传子属性值是非函数。若 子传父属性值是函数。
父组件
templatediv classfatherh3父组件/h3h4我的车{{ car }}/h4h4儿子给的玩具{{ toy }}/h4Child :carcar :getToygetToy//div
/templatescript setup langts nameFatherimport Child from ./Child.vueimport { ref } from vue;// 数据const car ref(奔驰)const toy ref()// 方法function getToy(value:string){toy.value value}
/script子组件
templatediv classchildh3子组件/h3h4我的玩具{{ toy }}/h4h4父给我的车{{ car }}/h4button clickgetToy(toy)玩具给父亲/button/div
/templatescript setup langts nameChildimport { ref } from vue;const toy ref(奥特曼)defineProps([car,getToy])
/script6.2. 【自定义事件】
概述自定义事件常用于子 父。注意区分好原生事件、自定义事件。
原生事件 事件名是特定的click、mosueenter等等事件对象$event: 是包含事件相关信息的对象pageX、pageY、target、keyCode 自定义事件 事件名是任意名称事件对象$event: 是调用emit时所提供的数据可以是任意类型 示例 !--在父组件中给子组件绑定自定义事件--
Child send-toytoy $event/!--注意区分原生事件与自定义事件中的$event--
button clicktoy $event测试/button//子组件中触发事件
this.$emit(send-toy, 具体数据)6.3. 【mitt】
概述与消息订阅与发布pubsub功能类似可以实现任意组件间通信。
安装mitt
npm i mitt新建文件src\utils\emitter.ts
// 引入mitt
import mitt from mitt;// 创建emitter
const emitter mitt()/*// 绑定事件emitter.on(abc,(value){console.log(abc事件被触发,value)})emitter.on(xyz,(value){console.log(xyz事件被触发,value)})setInterval(() {// 触发事件emitter.emit(abc,666)emitter.emit(xyz,777)}, 1000);setTimeout(() {// 清理事件emitter.all.clear()}, 3000);
*/// 创建并暴露mitt
export default emitter接收数据的组件中绑定事件、同时在销毁前解绑事件
import emitter from /utils/emitter;
import { onUnmounted } from vue;// 绑定事件
emitter.on(send-toy,(value){console.log(send-toy事件被触发,value)
})onUnmounted((){// 解绑事件emitter.off(send-toy)
})【第三步】提供数据的组件在合适的时候触发事件
import emitter from /utils/emitter;function sendToy(){// 触发事件emitter.emit(send-toy,toy.value)
}注意这个重要的内置关系总线依赖着这个内置关系
6.4.【v-model】 概述实现 父↔子 之间相互通信。 前序知识 —— v-model的本质 !-- 使用v-model指令 --
input typetext v-modeluserName!-- v-model的本质是下面这行代码 --
input typetext :valueuserName inputuserName (HTMLInputElement$event.target).value组件标签上的v-model的本质:moldeValue update:modelValue事件。 !-- 组件标签上使用v-model指令 --
AtguiguInput v-modeluserName/!-- 组件标签上v-model的本质 --
AtguiguInput :modelValueuserName update:model-valueuserName $event/AtguiguInput组件中 templatediv classbox!--将接收的value值赋给input元素的value属性目的是为了呈现数据 --!--给input元素绑定原生input事件触发input事件时进而触发update:model-value事件--input typetext :valuemodelValue inputemit(update:model-value,$event.target.value)/div
/templatescript setup langts nameAtguiguInput// 接收propsdefineProps([modelValue])// 声明事件const emit defineEmits([update:model-value])
/script也可以更换value例如改成abc !-- 也可以更换value例如改成abc--
AtguiguInput v-model:abcuserName/!-- 上面代码的本质如下 --
AtguiguInput :abcuserName update:abcuserName $event/AtguiguInput组件中 templatediv classboxinput typetext :valueabc inputemit(update:abc,$event.target.value)/div
/templatescript setup langts nameAtguiguInput// 接收propsdefineProps([abc])// 声明事件const emit defineEmits([update:abc])
/script如果value可以更换那么就可以在组件标签上多次使用v-model AtguiguInput v-model:abcuserName v-model:xyzpassword/6.5.【$attrs 】 概述$attrs用于实现当前组件的父组件向当前组件的子组件通信祖→孙。 具体说明$attrs是一个对象包含所有父组件传入的标签属性。 注意$attrs会自动排除props中声明的属性(可以认为声明过的 props 被子组件自己“消费”了)
父组件
templatediv classfatherh3父组件/h3Child :aa :bb :cc :dd v-bind{x:100,y:200} :updateAupdateA//div
/templatescript setup langts nameFatherimport Child from ./Child.vueimport { ref } from vue;let a ref(1)let b ref(2)let c ref(3)let d ref(4)function updateA(value){a.value value}
/script子组件
templatediv classchildh3子组件/h3GrandChild v-bind$attrs//div
/templatescript setup langts nameChildimport GrandChild from ./GrandChild.vue
/script孙组件
templatediv classgrand-childh3孙组件/h3h4a{{ a }}/h4h4b{{ b }}/h4h4c{{ c }}/h4h4d{{ d }}/h4h4x{{ x }}/h4h4y{{ y }}/h4button clickupdateA(666)点我更新A/button/div
/templatescript setup langts nameGrandChilddefineProps([a,b,c,d,x,y,updateA])
/script6.6. 【$refs、$parent】 概述 $refs用于 父→子。$parent用于子→父。 原理如下 属性说明$refs值为对象包含所有被ref属性标识的DOM元素或组件实例。$parent值为对象当前组件的父组件实例对象。
6.7. 【provide、inject】 概述实现祖孙组件直接通信 具体使用 在祖先组件中通过provide配置向后代组件提供数据在后代组件中通过inject配置来声明接收数据 具体编码 【第一步】父组件中使用provide提供数据 templatediv classfatherh3父组件/h3h4资产{{ money }}/h4h4汽车{{ car }}/h4button clickmoney 1资产1/buttonbutton clickcar.price 1汽车价格1/buttonChild//div
/templatescript setup langts nameFatherimport Child from ./Child.vueimport { ref,reactive,provide } from vue;// 数据let money ref(100)let car reactive({brand:奔驰,price:100})// 用于更新money的方法function updateMoney(value:number){money.value value}// 提供数据provide(moneyContext,{money,updateMoney})provide(car,car)
/script注意子组件中不用编写任何东西是不受到任何打扰的 【第二步】孙组件中使用inject配置项接受数据。 templatediv classgrand-childh3我是孙组件/h3h4资产{{ money }}/h4h4汽车{{ car }}/h4button clickupdateMoney(6)点我/button/div
/templatescript setup langts nameGrandChildimport { inject } from vue;// 注入数据let {money,updateMoney} inject(moneyContext,{money:0,updateMoney:(x:number){}})let car inject(car)
