vue slot 插槽的简单讲解和示例
插槽其实可以理解是父子组件的传参,或者或动态的占位符,父组件决定插槽的内容,子组件决定插槽的插在何处。
1.不具名插槽
即插槽中不用写name去匹配,直接使用
(1)在引入的子组件标签中写入要插入的内容
(2)在子组件中写一个插槽标签来接收内容
效果:
2。具名插槽
即需要在父组件引入的子组件标签中写入插槽内容,标签中的slot的属性值,会对应子组件slot标签的name属性值,注意,没有匹配上的不会显示
(1)父组件写入要插入的内容,同时配置slot 属性,来对应要插入子组件的哪个slot插槽
(2)子组件通过slot标签的name属性来匹配父组件的传入的值
(3)效果: