单个Slot
在children这个标签里面放Dom,Vue不会理你,也就是不会显示:
//父
<children>
<span>12345</span>//这边不会显示
</children>
//子
components: {
children: {
template: "<button>为了明确作用范围,所以使用button标签</button>"
}
}
你需要写成这样
children: {
template: "<button><slot></slot>为了明确作用范围,所以使用button标签</button>"
}
注意这边 slot 相当于一个坑,等着父组件给填上,这边 slot 代表的就是上面的 span
多个Slot
这边需要加name属性,说白了,多个Slot就不像上面单个,需要有个对应关系。
父-> slot="name1"
子-> <slot name="name1"
//父
<children>
<span slot="name1">12345</span>
</children>
//子
components: {
children: {
template: "<button>
<slot name="name1"></slot>
button标签
</button>"
}
}
- 这边写了一个name1,如果有多个,就插多个,比较简单。