东莞市官网网站建设哪家好,百度云资源,企业解决方案架构,公司网站域名备案流程个人理解#xff1a;是对组件的扩展#xff0c;通过slot插槽向组件内部指定位置传递内容#xff0c;通过slot可以父子传参#xff1b;开发背景(slot出现时为了解决什么问题)#xff1a;正常情况下,Childspan style”color:red;”hello world/span…
个人理解是对组件的扩展通过slot插槽向组件内部指定位置传递内容通过slot可以父子传参开发背景(slot出现时为了解决什么问题)正常情况下,Childspan style”color:red;”hello world/span/Child在组件标签Child中的span标签会被组件模板template内容替换掉当想让组件标签Child中内容传递给组件时需要使用slot插槽Slot的通俗理解是“占坑”在组件模板中占好了位置当使用该组件标签时候组件标签里面的内容就会自动填坑替换组件模板中slot位置当插槽也就是坑slot name”mySlot”有命名时组件标签中使用属性slot”mySlot”的元素就会替换该对应位置内容Slot使用 1、匿名插槽组件中有单个或多个未命名slot标签时如下 Childspan style”color:red;”hello world/span/Child template div slot/slot slot style”color:blue;” 这是在slot上添加了样式/slot slot name”mySlot”这是拥有命名的slot的默认内容/slot /div /template 会输出两个红色的hello world以及一个使用slot的默认内容 注意在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换会显示slot的默认值具名slot具有对应性 2、具名插槽组件中有多个命名的slot插槽时可以实现父组件对子组件的指定位置显示内容或传参如下Child
span slotheaderhello world/span
span slotmainhello world/span
span slotfooterhello world/span
span slotother{{otherData}}/span
/Child template
div
slot name”header”这是拥有命名的slot的默认内容/slot
slot name”main”这是拥有命名的slot的默认内容/slot
slot name”footer”这是拥有命名的slot的默认内容/slot
slot name”other”这是拥有命名的slot的默认内容/slot
/div
/template 3、作用域插槽使用时候子组件标签Child中要有template slot-scope”scopeName”标签再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据所以作用域插槽是一种子传父传参的方式解决了普通slot在parent中无法访问child数据的去问题作用域插槽代表性的用例是列表组件允许在parent父组件上对列表项进行自定义显示如下该items的所有列表项都可以通过slot定义后传递给父组件使用也就是说数据是相同的不同的场景页面可以有不同的展示方式 ul slot nameitem v-foritem in items :textitem.text :mynameitem.myname slot的默认内容 /slot /ul Child template slotitem slot-scopeprops li{{props.myname}}/li /template /Child
