自己做网站需要什么,网页设计与制作思政教学设计,wordpress知更鸟模板,做地接的网站文章目录 1.组件数据传递2.透传Attributes#xff08;了解#xff09;禁用Attributes继承 3.插槽slot3.1.插槽作用域3.2.默认内容3.3.具名插槽3.4.插槽中的数据传递3.5.具名插槽传递数据 1.组件数据传递
我们之前讲解过了组件之间的数据传递#xff0c;props 和 自定义事件… 文章目录 1.组件数据传递2.透传Attributes了解禁用Attributes继承 3.插槽slot3.1.插槽作用域3.2.默认内容3.3.具名插槽3.4.插槽中的数据传递3.5.具名插槽传递数据 1.组件数据传递
我们之前讲解过了组件之间的数据传递props 和 自定义事件 两种方式
props父传子
自定义事件子传父
props通过额外方式实现子传父回调函数原理实际上还是父传子 父传给子一个函数 子级实现函数的时候回传了一个数据templateh3ComponentA/h3ComponentB :titletitle :onEventdataFn/p{{ msg }}/p
/template
script
import ComponentB from ./ComponentB.vue
export default{data(){return{title:标题,msg:}},components:{ComponentB},methods:{dataFn(data){console.log(data);this.msg data;}}
}
/script
————————————————————————————————————————————————————————————————————————————————
templateh3ComponentB/h3p{{ title }}/pp{{ onEvent(传递数据) }}/p
/template
script
export default{data(){return{}},props:{title:String,onEvent:Function}
}
/script2.透传Attributes了解
是指传递给一个组件却没有被该组件声明为props或者emits的attribute或者v-on事件监听器。最常见的例子就是classstyle和id当一个组件以单个元素为根作渲染时透传的attribute会自动被添加到根元素上禁用Attributes继承
export default{//禁止继承inheritAttrs:false
}3.插槽slot
我们已经了解到了组件能够接受任意类型的js值作为props但组件要如何接收模板内容呢
在某些场景中可能想要为子组件传递一些模板片段diva标签等让子组件在它们的组件中渲染这些片段templateSlotsBasedivh3插槽标题/h3p插槽内容/p/div/SlotsBase
/template
script
import SlotsBase from ./components/SlotsBase.vue;export default{components:{SlotsBase}
}
/script
style/style
————————————————————————————————————————————————————————————————————————————————
templateh3插槽知识/h3slot/slot
/templateslot元素是一个插槽出口slot outlet标示了父元素提供的插槽内容将在哪里被渲染3.1.插槽作用域
插槽内容可以访问到父组件的数据作用域因为插槽内容本身是在父组件模板中定义的3.2.默认内容
在外部没有提供任何内容情况下可以为插槽指定默认内容3.3.具名插槽 v-slot有对应的简写 # 因此template v-slot:header可以简写为template #header。
意思就是将这部分摹本片段传入子组件的header插槽中templateSlot2Vuetemplate #headerh3{{ msg }}/h3/templatetemplate v-slot:mainp内容/p/template/Slot2Vue
/template
script
import Slot2Vue from ./components/Slot2.vue;
import SlotsBase from ./components/SlotsBase.vue;export default{data(){return{msg:插槽内容2}},components:{SlotsBase,Slot2Vue}
}
/script
style/style
_______________________________________________________________________________________________________
templateh3slot2/h3slot nameheader插槽默认值/slothrslot namemain插槽默认值/slot
/template
script
export default{data(){return{}}
}
/script3.4.插槽中的数据传递
在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。
要想做到这一点我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽
可以像对组件传递props那样向一个插槽的出口上传递attributes3.5.具名插槽传递数据 templateSlotSAttrVuetemplate #headerslotPropsh3{{ currentTest }} - {{ slotProps.msg }}/h3/templatetemplate #mainslotPropsp{{ slotProps.job }}/p/template/SlotSAttrVue
/template
script
import Slot2Vue from ./components/Slot2.vue;
import SlotSAttrVue from ./components/SlotSAttr.vue;
import SlotsBase from ./components/SlotsBase.vue;export default{data(){return{currentTest:测试内容}},components:{SlotsBase,Slot2Vue,SlotSAttrVue}
}
/script
style/style
_______________________________________________________________________________________________________
templateh3Slots数据传递/h3slot nameheader :msgchiildMessage/slotslot namemain :jobjobMessage/slot
/template
script
export default{data(){return{//先传给父元素在SlotSAttrVue 再通过父元素在子元素slot中显示chiildMessage:子组件数据,jobMessage:VUE}}
}
/script
