做电影网站算侵权吗,品牌策划咨询设计公司,微信小程序开发工具下载哪个版本,工作简历模板免费下载1、意义
插槽是vue提供的一个内置组件#xff0c;是一个占位符。作用是可以向组件中传递一段html代码#xff0c;加强了组件封装性以及复用性。
2、分类
插槽通常分为匿名插槽、具名插槽、作用域插槽
匿名插槽#xff1a;
顾名思义就是没有名字的插槽#xff0c;我们通…1、意义
插槽是vue提供的一个内置组件是一个占位符。作用是可以向组件中传递一段html代码加强了组件封装性以及复用性。
2、分类
插槽通常分为匿名插槽、具名插槽、作用域插槽
匿名插槽
顾名思义就是没有名字的插槽我们通常是通过匿名插槽把我们在子组件标签内写的html全部渲染到子组件中
//子组件标签
SlotTest :listlistformh3我是匿名插槽的数据/h3input typetext placeholder请输入内容/form
/SlotTest
templatediv classslotChildh1我是插槽组件/h1slot/slot!-- 匿名插槽 --/div
/template
具名插槽
有名字的插槽通常是将我们想要定义的html放置到对应的位置 SlotTest :listlist!-- 具名插槽 --template #btnbutton添加/buttonbutton删除/button/template/SlotTest
templatediv classslotChildh1我是插槽组件/h1slot namebtn/slot/div
/template
作用域插槽
通常通过插槽传递列表以后我们想要执行一些操作但是无法获取到数据通过作用域插槽可以获取子组件中的值父组件可以获取值从而进行业务逻辑处理。
SlotTest :listlisttemplate #btnchildPropspre{{ childProps }}/prebutton添加/buttonbutton clickdel(childProps.item.ind)删除/button!-- button clickdel(childProps.item.id)删除/button --/template
/SlotTest
templatediv classslotChildh1我是插槽组件/h1ulli v-for(i, ind) in list :keyi.id{{ i.name }}!-- 具名插槽 --!-- 作用域插槽(通过slot上传递属性) --slot namebtn :item{ i, ind }/slot/li/ul/div
/template
在render中如何获取插槽内容
匿名插槽vm.$slots.default
具名插槽vm.$slots.name
作用域插槽vm.$scopeSlots
