<!DOCTYPE html>
这段话也是来自defaultSlot.vue,但它写在
ChildSlot
标签上面,因此,虽然他会有一个棕色的背景色,但不会被红色边框圈起来。这是插槽的练习。这段话来自defaultSlot.vue,且会有一个浅绿色的背景色。本页面引入了childSlot.vue;而childSlot.vue中
有一个
slot
标签,因此,在这段话的上面,还会显示childSlot.vue中的内容。而如果注释掉childSlot.vue中的
slot
标签,则本段内容不显示。因为这段话写在ChildSlot
标签中,因此,它也会被一个红色的边框圈起来。
这段话也是来自defaultSlot.vue,但它写在
ChildSlot
标签下面,因此,虽然他会有一个灰色的背景色,但不会被红色边框圈起来。import ChildSlot from '../childSlot.js' export default { name: "defaultSlot", components: { ChildSlot } }
以上是defaultSlot.html 页面
这是childSlot.vue中的内容,他会被一个红色的边框圈起来
export default { name: "childSlot" }
以上是
childSlot.js