vue大型网站开发,弄美团网站的一般一个做赚多少钱,网页ui设计作品欣赏,怎么将网站做成html组件通信 一.$attrs(祖孙间接#xff09;二、$refs()父子#xff0c; $parent()子父三.provide#xff0c;inject(祖孙直接#xff09;四.pinia五.slot1.默认插槽2.具名插槽3.作用域插槽 一.$attrs(祖孙间接#xff09;
$attrs用于实现当前组件的父组… 组件通信 一.$attrs(祖孙间接二、$refs()父子 $parent()子父三.provideinject(祖孙直接四.pinia五.slot1.默认插槽2.具名插槽3.作用域插槽 一.$attrs(祖孙间接
$attrs用于实现当前组件的父组件向当前组件的子组件通信祖→孙。 $ attrs是一个对象包含所有父组件传入的标签属性。 注意$attrs会自动排除props中声明的属性(可以认为声明过的 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 classchildh3子组件/h3GrandChild v-bind$attrs//div
/templatescript setup langts nameChildimport GrandChild from ./GrandChild.vue
/script二、$refs()父子 $parent()子父
$ refs父亲拿取孩子的数据$parent孩子拿取父亲的数据 1.原理 $refs值为对象包含所有被ref属性标识的DOM元素或组件实例。 $parent值为对象当前组件的父组件实例对象。 2.传递数据的需要把数据暴露出来才能被用 用defineExpose()暴露
// 宏函数把数据交给外部
defineExpose({ toy, book })父组件
templatediv classfatherh3父组件/h3h4房产{{ house }}/h4button clickchangeToy修改Child1的玩具/buttonbutton clickgetAllChild($refs)让所有孩子的书变多/buttonChild1 refc1//div
/templatescript setup langts nameFatherimport Child1 from ./Child1.vueimport { ref,reactive } from vue;let c1 ref()// 数据let house ref(4)// 方法function changeToy(){c1.value.toy 小猪佩奇}function getAllChild(refs:{[key:string]:any}){console.log(refs)for (let key in refs){refs[key].book 3}}// 向外部提供数据defineExpose({house})
/script子组件
templatediv classchild1h3子组件1/h3h4玩具{{ toy }}/h4h4书籍{{ book }} 本/h4button clickminusHouse($parent)干掉父亲的一套房产/button/div
/templatescript setup langts nameChild1import { ref } from vue;// 数据let toy ref(奥特曼)let book ref(3)// 方法function minusHouse(parent:any){parent.house - 1}// 把数据交给外部defineExpose({toy,book})/script
三.provideinject(祖孙直接
具体使用 在祖先组件中通过provide配置向后代组件提供数据 在后代组件中通过inject配置来声明接收数据 祖组件
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孙组件
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)
/script四.pinia
参考之前的笔记
五.slot
1.默认插槽
父组件中Category title今日热门游戏ulli v-forg in games :keyg.id{{ g.name }}/li/ul/Category
子组件中templatediv classitemh3{{ title }}/h3!-- 默认插槽 --slot/slot/div/template2.具名插槽
父组件中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/template3.作用域插槽
数据在组件的自身子组件但根据数据生成的结构需要组件的使用者父组件来决定。新闻数据在News组件中但使用数据所遍历出来的结构由App组件决定
父组件中Game v-slotparams!-- Game v-slot:defaultparams --!-- Game #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
