vue.js三种插槽的快速理解和使用

子组件中的slot就是预留了一个空间,父组件可以往这个空间里插入内容,同时可以为这个slot默认设置一段内容,当父组件没有插入内容时就显示默认内容。

匿名插槽

匿名插槽就是没有名字的插槽,子组件里写个插槽,父组件往里面插入内容就行了

代码:

匿名插槽代码


显示结果:

显示结果

具名插槽

具名插槽就是给子组件模板里的slot设置名字,父组件想要使用哪个插槽就指定哪个插槽的名字,以此替换相对应的插槽。(较于匿名插槽,具名插槽更有针对性)

举个例子~

1.挂载好父组件和子组件

挂载父子组件

2.子组件的模板内容:

子组件模板

3.使用子组件:

旧版本使用slot属性的写法,但是这个方法已经被弃用啦:

旧方法slot使用

在2.6.0+后,用v-slot属性替代了slot :

注意,v-slot必须添加到