vue slot 插槽的简单讲解和示例

插槽其实可以理解是父子组件的传参,或者或动态的占位符,父组件决定插槽的内容,子组件决定插槽的插在何处。

1.不具名插槽

    即插槽中不用写name去匹配,直接使用

(1)在引入的子组件标签中写入要插入的内容

vue slot 插槽的简单讲解和示例

(2)在子组件中写一个插槽标签来接收内容

vue slot 插槽的简单讲解和示例

效果:

vue slot 插槽的简单讲解和示例

2。具名插槽

即需要在父组件引入的子组件标签中写入插槽内容,标签中的slot的属性值,会对应子组件slot标签的name属性值,注意,没有匹配上的不会显示

(1)父组件写入要插入的内容,同时配置slot 属性,来对应要插入子组件的哪个slot插槽 

vue slot 插槽的简单讲解和示例

(2)子组件通过slot标签的name属性来匹配父组件的传入的值

vue slot 插槽的简单讲解和示例

(3)效果:

vue slot 插槽的简单讲解和示例

3.作用域插槽--这条基本没有用过,就不写了