电子商务网站建设资讯定西市建设厅官方网站

当前位置： 首页 > news >正文

电子商务网站建设资讯,定西市建设厅官方网站,石家庄网站制作福州,2022一级造价师停考前言#xff1a;本文默认读者有JS基础和Vue基础#xff0c;如果没有这个两个基础#xff0c;可能阅读比较困难#xff0c;建议先看下官方文档#xff0c;当然#xff0c;也欢迎评论交流#x1f601; 通信方式总结 常见搭配形式 一、props#xff08;使用频率最高#… 前言本文默认读者有JS基础和Vue基础如果没有这个两个基础可能阅读比较困难建议先看下官方文档当然也欢迎评论交流 通信方式总结 常见搭配形式 一、props使用频率最高 1、父传子 !– parent.vue – templatedi classparenth3这是父组件/h3!– 通过props把数组传给子组件 –Child :technologyStacktechnologyStack //di /templatescript setup langts namepropsParent import { ref } from vue; import Child from ./child.vuelet technologyStack ref([{ id: 1, name: Vue },{ id: 2, name: React },{ id: 3, name: NodeJs }, ]) //前端技术栈/script style langscss scoped .parent{padding: 20px;background-color: aqua; } /style!– child.vue – templatediv classchildh3这里是子组件/h3ulli v-fortechnologyItem in technologyStack :keytechnologyItem.id{{ technologyItem.name }}/li/ul/div /templatescript setup langts namepropsChild //接受父组件通过props传过来的数据 defineProps([technologyStack])/script style langscss scoped .child {border: 1px solid #000;background-color: aquamarine;padding: 20px; } /style效果  2、子传父通过函数  !– parent.vue – templatedi classparenth3这是父组件/h3h4 v-ifchildTechnology子组件补充的技术{{ childTechnology }}/h4!– 通过props把数组传给子组件 –Child :technologyStacktechnologyStack :getNewTechnologygetNewTechnology //di /templatescript setup langts namepropsParent import { ref } from vue; import Child from ./child.vuelet technologyStack ref([{ id: 1, name: Vue },{ id: 2, name: React },{ id: 3, name: NodeJs }, ]) //前端技术栈//用于接收子组件传的数据 let childTechnology refstring() //子组件通过调用这个方法给父组件传数据 function getNewTechnology(value: string) {childTechnology.value value }/script style langscss scoped .parent {padding: 20px;background-color: aqua; } /style!– child.vue – templatediv classchildh3这里是子组件/h3ulli v-fortechnologyItem in technologyStack :keytechnologyItem.id{{ technologyItem.name }}/li/ulbutton clickgetNewTechnology(threejs)补充父组件的技术栈/button/div /templatescript setup langts namepropsChild //接受父组件通过props传过来的数据和方法 defineProps([technologyStack, getNewTechnology])/script style langscss scoped .child {border: 1px solid #000;background-color: aquamarine;padding: 20px; } /style效果 二、自定义事件区别于原生事件 常用于子传父事件名任意事件对象\(event是调用emit时所提供的数据数据可以是任意类型 !-- parent.vue -- templatediv classparenth3父组件/h3div技术栈中技术总数{{ technologySum }}/div!-- changeSum就是自定义事件 --Child changeSumgetChangeSum / /div /templatescript setup langts namexxxxximport { ref } from vue;import Child from ./child.vuelet technologySum refnumber(0)function getChangeSum(value: number) {technologySum.value value} /script!-- child.vue -- templatediv classchildh3这里是子组件/h3button clickonChangeSum父组件的技术总数6/button/div /templatescript setup langts namecustomEventChildconst emit defineEmits([changeSum])function onChangeSum(){emit(changeSum, 6) //触发自定义事件并传数据} /script效果 自定义事件通信 三、mitt发布订阅 mitt是一个仓库与消息订阅与发布pubsub功能类似可以实现任意组件间通信 在使用前我们需要先安装一下 npm i mitt 安装完毕后因为他是一个工具库我们新建文件src\utils\emitter.ts // emitter.ts文件import mitt from mitt// 创建emitter仓库命名用的是emitter const emitter mitt()// 创建并暴露mitt export default emitter !-- provide.vue -- templatediv classprovide-containerh3提供数据的组件/h3button clicksendData发送数据/button/div /templatescript setup langts namexxxxx import { ref } from vue; import emitter from /utils/emitter //引入let sendTxt refstring(我是被发送的数据) function sendData() {emitter.emit(sendData, sendTxt.value) //触发事件发送数据 } /script style langscss scoped .provide-container{background-color: aquamarine;text-align: center;padding: 20px; } /style!-- accept.vue -- templatediv classaccept-containerh3接收数据的组件/h3div接收到的数据 {{ acceptData }}/div/div /templatescript setup langts namexxxxx import { ref, onUnmounted } from vue; import emitter from /utils/emitter;let acceptData refstring()//绑定事件 emitter.on(sendData, (value) {acceptData.value value as stringconsole.log(sendData事件被触发接收到数据value为, value); })//组件卸载后 onUnmounted(() {emitter.off(sendData) //为避免内存泄漏等问题一定要记得解绑 })/script style langscss scoped .accept-container {margin-top: 20px;padding: 20px;background-color: aqua;text-align: center; } /style路由文件中的引用这里以兄弟组件为例要注意mitt可以在任意组件中使用 不限于兄弟组件 效果 四、v-model 双向绑定 通过v-model进行通信的方式在UI组件库底层代码中大量使用去看一下UI组件库的仓库源码就能看到自己封装UI组件同理 在使用v-model通信前我们需要先知道v-model是怎么实现数据和视图的双向绑定的 templatediv通信方式v-model/div!-- 直接使用v-model实现双向绑定 --divv-model输入框/divinput v-modeluserName/!-- v-model双向绑定的本质是下面这行代码 --div stylemargin-top:20px;本质语法输入框/divinput :valueauthor inputauthor \)event.target.value//templatescript setup langts nameVModelFather import { ref } from vue; let userName ref(Ada King) let author ref(hoshino)/scriptvalue实现了数据到视图input事件实现视图到数据两者结合即完成数据双向绑定功能 效果如下图更改前 输入框更改后  同理我们在开发过程中使用UI组件库时UI组件库的底层代码也是这个原来下面来模拟一下 templateh2通信方式v-model/h2!– 使用组件库中的组件自定义一个输入框组件进行模拟 –div组件库input输入框模拟/divCustomInput v-modeluserName/div stylemargin-top:20px;本质写法组件库input输入框模拟/divCustomInput :modelValueauthor update:model-valueauthor \(event//templatescript setup langts nameVModelFather import { ref } from vue; import CustomInput from ./customInput.vue let userName ref(Ada King) let author ref(hoshino)/script而组件库底层代码如下通过接受props传入的数据以及结合触发自定义事件updatemodel-value就实现了v-model进行数据通信的功能 templateinput classinput typetext :valuemodelValue inputemit(update:model-value, (HTMLInputElement\)event.target).value) /templatescript setup langts nameCustomInput defineProps([modelValue]) //接收props传入的数据 //update:model-value只是一个完整的事件名这是vue3的写法中间的冒号不代表分割 const emit defineEmits([update:model-value]) /script style langscss scoped .input{border: 2px solid #000;height: 26px;border-radius: 4px; } /style在我们日常开发中一般直接使用v-model那些底层实现UI组件库已经帮我们处理了所以本质的写法我们平时接触不到负责UI组件封装的小伙伴会接触更多 五、\(attrs \)attrs用于祖孙通信子组件作为中间人传递数据\(attrs是一个对象包含所有父组件传入的标签属性 注意\)attrs会自动排除props中声明的属性(可以认为声明过的 props 被子组件自己“消费”了) 父组件可以在控制台看setup中的数据 !– father.vue – templatediv classfatherh3父组件/h3Child :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), b ref(2), c ref(3), d ref(4)function updateA(value: number) {a.value a.value value } /script style langscss scoped .father {padding: 10px;background-color: rgb(160, 64, 219); } /style 子组件通过v-bind将\(attrs中所有数据都直接传给孙组件注意不要用props消耗父组件传过来的属性 templatediv classchildh3子组件/h3!-- v-bind 中间人传递 --GrandChild v-bind\)attrs //div /templatescript setup langts nameChild import GrandChild from ./grandChild.vue /script style langscss scoped .child {background-color: rgb(36, 135, 205); } /style 孙组件 templatediv classgrand-childh3孙组件/h3h4a{{ a }}/h4h4b{{ b }}/h4h4c{{ c }}/h4h4d{{ d }}/h4h4x{{ x }}/h4h4y{{ y }}/h4button clickupdateA(666)点我更新A/button/div /templatescript setup langts nameGrandChild defineProps([a, b, c, d, x, y, updateA]) /script style langscss scoped .grand-child {padding: 10px;background-color: rgb(176, 232, 175); } /style 六、\(refs \)parent \(refs用于父传子通信\)parent用于子传父通信 \(refs的值为对象包含所有被ref属性标识的DOM元素或组件实例。\)parent的值为对象是当前组件的父组件实例对象。 1、首先我们看下单个ref实现修改子组件数据的实现 templatediv classfatherh2父组件/h2button clickonChangeBookNum修改子组件书的数量/buttonChild refchildRef1 //div /templatescript setup langts nameFather import { ref } from vue; import Child from ./child.vuelet childRef1 ref()function onChangeBookNum() {console.log(触发了onChangeBookNum事件,childRef1.value);childRef1.value.bookCount 300 } /script style langscss scoped .father {padding: 10px;background-color: rgb(87, 100, 184); } /styletemplatediv classchildh2子组件/h2div书的总数{{ bookCount }}/divdivulli v-forbookItem in bookList :keybookItem.id{{ bookItem.name }}/li/ul/div/div /templatescript setup langts nameChild import { ref } from vue; let bookCount refnumber(200) let bookList ref([{ id: 1, name: 你当象鸟飞往你的山 },{ id: 2, name: 少有人走的路 }, ])defineExpose({ bookCount }) //子组件主动向外暴露的数据父组件才能修改 /script style langscss scoped .child {padding: 10px;background-color: aqua; } /style2、由第1步可以看到单个ref修改数据已实现 获取全部ref如下 templatediv classfatherh2父组件/h2!– \(refs是特殊占位符直接用即可 --button clickgetAllChildRef(\)refs)获取所有ref/buttonChild refchildRef1 /Child refchildRef2 //div /templatescript setup langts nameFather import { ref } from vue; import Child from ./child.vuelet childRef1 ref() let childRef2 ref()//获取所有 function getAllChildRef(refs: { [key: string]: any }) {console.log(refs, refs); } /script style langscss scoped .father {padding: 10px;background-color: rgb(87, 100, 184); } /style3、\(parent与\)refs类似只是方向改为子传父 templatediv classfatherh2父组件/h2div父亲银行卡数量{{ bankCardNum }}/divChild //div /templatescript setup langts nameFather import { ref } from vue; import Child from ./child.vuelet bankCardNum ref(2) defineExpose({ bankCardNum })/script style langscss scoped .father {padding: 10px;background-color: rgb(87, 100, 184); } /styletemplatediv classchildh2子组件/h2button clickchangeBankCardNum($parent)父亲银行卡1/button/div /templatescript setup langts nameChild function changeBankCardNum(parent: any) {console.log(父组件实例对象-parent, parent);parent.bankCardNum 1 } /script style langscss scoped .child {padding: 10px;background-color: aqua; } /style七、provide inject 实现祖孙组件直接通信不用通过中间人 在祖先组件中通过provide配置向后代组件提供数据在后代组件中通过inject配置来声明接收数据 八、pina 和vue2的vuex类似的功能是一个全局状态管理库vue3使用pina作为全局状态管理更符合视觉他的store直接支持组合式写法 import {defineStore} from pinia import axios from axios import {nanoid} from nanoid import {reactive} from vueexport const useTalkStore defineStore(talk,(){// talkList就是stateconst talkList reactive(JSON.parse(localStorage.getItem(talkList) as string) || [])// getATalk函数相当于actionasync function getATalk(){// 发请求下面这行的写法是连续解构赋值重命名let {data:{content:title}} await axios.get(https://api.uomg.com/api/rand.qinghua?formatjson)// 把请求回来的字符串包装成一个对象let obj {id:nanoid(),title}// 放到数组中talkList.unshift(obj)}return {talkList,getATalk} }) 数据的读、改和vuex类似这里不赘述可以直接看官方文档 简介 | Pinia值得你喜欢的 Vue Storehttps://pinia.vuejs.org/zh/introduction.html 九、slot(插槽) 插槽包含 默认插槽、具名插槽、作用域插槽 1、默认插槽name“default” 父组件中Category title今日热门游戏ulli v-forg in games :keyg.id{{ g.name }}/li/ul/Category 子组件中templatediv classitemh3{{ title }}/h3!– 默认插槽 –slot/slot/div/template 2、具名插槽 父组件中Category title今日热门游戏template v-slot:s1ulli v-forg in games :keyg.id{{ g.name }}/li/ul/templatetemplate #s2a href更多/a/template/Category 子组件中templatediv classitemh3{{ title }}/h3slot names1/slotslot names2/slot/div/template 3、作用域插槽 父组件中Game v-slotparams //这一步是重点!– Game v-slot:defaultparams –ulli v-forg in params.games :keyg.id{{ g.name }}/li/ul/Game子组件中templatediv classcategoryh2今日游戏榜单/h2slot :gamesgames a哈哈/slot/div/templatescript setup langts nameCategoryimport {reactive} from vuelet games reactive([{id:asgdytsa01,name:英雄联盟},{id:asgdytsa02,name:王者荣耀},{id:asgdytsa03,name:红色警戒},{id:asgdytsa04,name:斗罗大陆}])/script ps学习笔记如有不恰当之处欢迎交流