默认插槽

组件中的标签体内容。

vue的slot插槽_前端


标签体内容放在哪里,需要定义一个插槽。

vue的slot插槽_作用域_02


vue的slot插槽_前端_03

具名插槽

我们需要使用多个插槽。每一个插槽都有一个自己的名字。

不往插槽里面放内容,插槽的默认内容就会显示。

vue的slot插槽_前端_04


vue的slot插槽_插槽_05


template可以用来包裹元素,然后不生成结构。

vue的slot插槽_vue.js_06


另外一种写法:

vue的slot插槽_赋值_07

作用域插槽

vue的slot插槽_vue.js_08


接收数据。

vue的slot插槽_作用域_09


使用结构赋值。

vue的slot插槽_前端_10

总结

vue的slot插槽_vue.js_11


vue的slot插槽_前端_12


vue的slot插槽_赋值_13


vue的slot插槽_vue.js_14


作用域插槽也能使用具名插槽。