Vue中如何利用JavaScript实现自定义插槽功能？

本文共计970个文字，预计阅读时间需要4分钟。

目录- Vue中使用插槽：slot- 插槽作用域组件：使用template标签包裹- 总结- 在Vue中使用插槽：slot - 在子组件的template里可以直接使用slot标签slot/slot - 它可以显示父组件向子组件插入的内容

目录

• 在Vue中使用插槽：slot
• 作用域插槽：使用template标签包裹
• 总结

在Vue中使用插槽：slot

1、在子组件的template里可以直接使用slot标签<slot></slot>，它可以显示父组件向子组件插入的内容。

2、slot标签里面可以写一些默认值，当父组件没有插入内容的时候它就会显示默认值，插入内容时就只显示插入的内容。

3、当使用多个slot标签时，直接插入多个内容时，每个slot标签内都会包括所有插入的内容。

可以通过slot属性给插入的不同内容设置指定的名字，然后给相应的slot标签设置相应的name属性值，就可以让该slot标签显示指定的插入内容。

1、插槽是统称，模板中的三个slot标签都是插槽。

2、但是多个插槽需要区分，会分别设置一个name属性。这个就叫做“具名插槽”，需要使用name属性命名。

3、上面的是插入插槽的内容，将某个名字的内容插到子组件对应名字里面去。这里就是插入到name="footer"这个插槽中。

4、一般只有一个插槽的时候，不需要具名哦，多个才需要name来区分。