个人理解:
通过组件的扩展,可以通过slot插槽将内容传递到组件内部的指定位置,并通过slot亲子参与
开发背景(slot出现时为了解决什么问题):
通常,Childspan style=”color:red; “hello world/span/Child的组件标签Child中的span标签将替换为组件模板template的内容。 需要一个slot插槽才能将组件标签Child中的内容传递给组件。
Slot的通俗理解
是“坑”,在组件模板中定位。 使用此部件标签时,部件标签中的内容将自动填充基坑。 也就是说,如果坑slot name=”mySlot "已命名,则部件标签中属性slot=”mySlot "的元素将替换该位置的内容。
Slot使用
1、组件中有单个或多个未命名slot标签时
Childspan style=”color:red; “hello world/span/Child”
template
div
插槽/插槽
slot style=”color:blue; ’这是在slot上添加了样式/slot
slot name=”mySlot "这是带有命名slot的默认内容/slot
/div
/template
输出。 有两个红色的hello world和一个使用slot的默认内容
注意:向slot标记添加样式无效。 不能用没有slot属性的标记的内容替换命名的插槽。 显示slot的默认值。 命名的slot是对应的。
http://www.Sina.com/http://www.Sina.com /见下文。
Child
span slot=' header ' hello world/span
span slot='main'hello world/span
span slot=' footer ' hello world/span
span slot=' other ' { { other data } }/span
/Child
template
div
slot name=”header "这是带有命名快照的默认内容/slot
slot name=”main "这是具有命名slot的默认内容/slot
slot name=”footer "这是具有命名slot的默认内容/slot
slot name=”other "这是带有命名slot的默认内容/slot
/div
/template
2、组件中有多个命名的slot
使用时,子组件标签Child必须具有template scope=”scopeName "标签,以便从子组件样板中的childProp调用绑定的数据
范围插槽的典型用例是列表组件,它允许您在parent的父组件中定制和显示列表项。 可以使用slot定义将items中的所有列表项传递给父组件,如下所示: 这意味着数据相同,不同的场景页面可以有不同的显示方式。
ul
sot name=' item ' v-for=' iteminitems ' : text=' item.text ' : my name=' item.my name '
快照的默认内容
/slot
/ul
Child
templates lot=' item ' scope=' props '
li{{props.myname}}/li
/template
/Child