VUE.js学习笔记--简单理解标签

slot

官方称之为”插槽”,我理解就是像是内存插槽的意思,我在子组件里提供这么一个标签(相当于主板提供的内存插槽)至于插入什么内容(插几G的内存)那是父组件需要提供的(由主机配置决定)。举个栗子:
我们继续改造一下之前的的案例:


我们改造了一下父组件,在调用子组件的模板时在里面增加一段话


VUE.js学习笔记--简单理解<slot>标签_第1张图片
执行后,原来新加的话被替换了

执行后可以看出,展示的是模板里的内容,我们在父组件里加的其实已经被替换掉了,但如何让他显示呢?这就需要插槽啦
修改li-test.vue组件:


子组件模板中我们加入组件:


VUE.js学习笔记--简单理解<slot>标签_第2张图片
可以看到标签直接替换成了我们在父组件增加的话啦

具名slot

上面的例子描述了简单的slot标签如何使用,但是有些场景下一个slot可能不能满足我们的组件需求,对于这样的情况, 元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:官网案例:

一个不带 name 的 出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候,我们可以在一个