温州建站平台,如何创建网站的详细步骤,wordpress抓取公众号文章,查商标「写在前面」 本文为尚硅谷禹神 Vue3 教程的学习笔记。本着自己学习、分享他人的态度#xff0c;分享学习笔记#xff0c;希望能对大家有所帮助。推荐先按顺序阅读往期内容#xff1a; 1. Vue3 学习笔记#xff08;Day1#xff09; 2. Vue3 学习笔记#xff08;Day2分享学习笔记希望能对大家有所帮助。推荐先按顺序阅读往期内容 1. Vue3 学习笔记Day1 2. Vue3 学习笔记Day2 3. Vue3 学习笔记Day3 4. Vue3 学习笔记Day4 目录 6 组件通信 6.1 props 6.2 自定义事件 6.3 mitt 6.4 v-model 6.5 $attrs 6.6 、 parent 6.7 provide、inject 6.8 pinia 6.9 slot 6 组件通信 P52https://www.bilibili.com/video/BV1Za4y1r7KE?p52 Vue3组件通信和Vue2的区别 移出事件总线使用 mitt代替。 vuex换成了 pinia。 把 .sync优化到了 v-model里面了。 把 $listeners所有的东西合并到 $attrs中了。 $children被砍掉了。 常见搭配形式 6.1 props 概述props是使用频率最高的一种通信方式常用与 父 ↔ 子。 若 父传子属性值是 非函数。 若 子传父属性值是 函数。 父组件 template div classfather h3父组件/h3 h4我的车{{ car }}/h4 h4儿子给的玩具{{ toy }}/h4 Child :carcar :getToygetToy/ /div/templatescript setup langts nameFather import Child from ./Child.vue import { ref } from vue; // 数据 const car ref(奔驰) const toy ref() // 方法 function getToy(value:string){ toy.value value }/script 子组件 template div classchild h3子组件/h3 h4我的玩具{{ toy }}/h4 h4父给我的车{{ car }}/h4 button clickgetToy(toy)玩具给父亲/button /div/templatescript setup langts nameChild import { ref } from vue; const toy ref(奥特曼) defineProps([car,getToy])/script 6.2 自定义事件 P53https://www.bilibili.com/video/BV1Za4y1r7KE?p53 概述自定义事件常用于 子 父。 注意区分好原生事件、自定义事件。 原生事件 事件名是特定的 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 P54https://www.bilibili.com/video/BV1Za4y1r7KE?p54 概述与消息订阅与发布pubsub功能类似可以实现任意组件间通信。 安装mitt npm i mitt 新建文件src\utils\emitter.ts // 引入mitt import mitt from mitt;// 创建emitterconst 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); */// 创建并暴露mittexport 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 P55https://www.bilibili.com/video/BV1Za4y1r7KE?p55 P56https://www.bilibili.com/video/BV1Za4y1r7KE?p56 概述实现 父↔子 之间相互通信。 前序知识 —— 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组件中 template div 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 // 接收props defineProps([modelValue]) // 声明事件 const emit defineEmits([update:model-value])/script 也可以更换value例如改成abc !-- 也可以更换value例如改成abc--AtguiguInput v-model:abcuserName/!-- 上面代码的本质如下 --AtguiguInput :abcuserName update:abcuserName $event/ AtguiguInput组件中 template div classbox input typetext :valueabc inputemit(update:abc,$event.target.value) /div/templatescript setup langts nameAtguiguInput // 接收props defineProps([abc]) // 声明事件 const emit defineEmits([update:abc])/script 如果value可以更换那么就可以在组件标签上多次使用v-model AtguiguInput v-model:abcuserName v-model:xyzpassword/ 6.5 $attrs P57https://www.bilibili.com/video/BV1Za4y1r7KE?p57 概述$attrs用于实现当前组件的父组件向当前组件的子组件通信祖→孙。 具体说明$attrs是一个对象包含所有父组件传入的标签属性。 注意$attrs会自动排除props中声明的属性(可以认为声明过的 props 被子组件自己“消费”了) 父组件 template div classfather h3父组件/h3 Child :aa :bb :cc :dd v-bind{x:100,y:200} :updateAupdateA/ /div/templatescript setup langts nameFather import Child from ./Child.vue import { 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 子组件 template div classchild h3子组件/h3 GrandChild v-bind$attrs/ /div/templatescript setup langts nameChild import GrandChild from ./GrandChild.vue/script 孙组件 template div classgrand-child h3孙组件/h3 h4a{{ a }}/h4 h4b{{ b }}/h4 h4c{{ c }}/h4 h4d{{ d }}/h4 h4x{{ x }}/h4 h4y{{ y }}/h4 button clickupdateA(666)点我更新A/button /div/templatescript setup langts nameGrandChild defineProps([a,b,c,d,x,y,updateA])/script 6.6 $refs、$parent P58https://www.bilibili.com/video/BV1Za4y1r7KE?p58 P59https://www.bilibili.com/video/BV1Za4y1r7KE?p59 概述 $refs用于 父→子。 $parent用于 子→父。 原理如下 属性说明$refs值为对象包含所有被ref属性标识的DOM元素或组件实例。$parent值为对象当前组件的父组件实例对象。 6.7 provide、inject P60https://www.bilibili.com/video/BV1Za4y1r7KE?p60 概述实现祖孙组件直接通信 具体使用 在祖先组件中通过 provide配置向后代组件提供数据 在后代组件中通过 inject配置来声明接收数据 具体编码 【第一步】父组件中使用provide提供数据 template div classfather h3父组件/h3 h4资产{{ money }}/h4 h4汽车{{ car }}/h4 button clickmoney 1资产1/button button clickcar.price 1汽车价格1/button Child/ /div/templatescript setup langts nameFather import Child from ./Child.vue import { 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配置项接受数据 template div classgrand-child h3我是孙组件/h3 h4资产{{ money }}/h4 h4汽车{{ car }}/h4 button clickupdateMoney(6)点我/button /div/templatescript setup langts nameGrandChild import { inject } from vue; // 注入数据 let {money,updateMoney} inject(moneyContext,{money:0,updateMoney:(x:number){}}) let car inject(car)/script 6.8 pinia 参考之前pinia部分的讲解 6.9 slot 1. 默认插槽 P61https://www.bilibili.com/video/BV1Za4y1r7KE?p61 父组件中 Category title今日热门游戏 ul li v-forg in games :keyg.id{{ g.name }}/li /ul/Category 子组件中 template div classitem h3{{ title }}/h3 !-- 默认插槽 -- slot/slot /div/template 2. 具名插槽 P62https://www.bilibili.com/video/BV1Za4y1r7KE?p62 父组件中 Category title今日热门游戏 template v-slot:s1 ul li v-forg in games :keyg.id{{ g.name }}/li /ul /template template #s2 a href更多/a /template/Category 子组件中 template div classitem h3{{ title }}/h3 slot names1/slot slot names2/slot /div/template 3. 作用域插槽 P63https://www.bilibili.com/video/BV1Za4y1r7KE?p63 理解数据在组件的自身但根据数据生成的结构需要组件的使用者来决定。新闻数据在News组件中但使用数据所遍历出来的结构由App组件决定 父组件中 Game v-slotparams!-- Game v-slot:defaultparams --!-- Game #defaultparams -- ul li v-forg in params.games :keyg.id{{ g.name }}/li /ul/Game 子组件中 template div classcategory h2今日游戏榜单/h2 slot :gamesgames a哈哈/slot /div/templatescript setup langts nameCategory import {reactive} from vue let games reactive([ {id:asgdytsa01,name:英雄联盟}, {id:asgdytsa02,name:王者荣耀}, {id:asgdytsa03,name:红色警戒}, {id:asgdytsa04,name:斗罗大陆} ])/script 「结束」 本文由 mdnice 多平台发布
