vue插槽讲解

一、插槽使用

因为插槽是在组件的基础上衍生的，因此需要创建一个组件并注册引用。

<slot> 元素可以将插槽内容渲染出来

二、内容覆盖

父级组件中的插槽内容会覆盖子级组件中的插槽内容。

例如：

子组件插槽中写上一句话，父组件插槽内容什么也不写，渲染出来的内容为子组件的插槽内容。

子组件插槽中写上一句话，父组件插槽中也写上一句话，渲染出来的内容为父组件的插槽内容。

三、具名插槽

当有多个插槽使用时，怎么判断使用的是哪个插槽呢，具名插槽应运而生。所谓具名插槽，就是给插槽起个名字。

子组件以  name  参数使用不同的插槽，父组件以  v-slot:别名  定义不同的插槽，不带 name 参数的默认名为“default”。

例如：

注意：

1、v-slot 只能添加在 <template> 上

2、跟 v-on 和 v-bind 一样，v-slot 也有缩写，“v-slot:”可以替换为“#”，例如：v-slot:one  ==》#one

四、作用域插槽

个人理解：子组件插槽数据只能子组件使用，父组件无法使用子组件插槽的内容。

例如：

我们在子组件中添加一个对象数据（user），在子组件插槽中使用动态参数将对象数据绑上去。

父组件插槽名设置一个参数以接收回调数据

五、动态插槽名

使用方式：v-slot:[动态参数] 或 #[动态参数]

例如：子组件定义两个插槽，内容分别为一长串的1、2

父组件中定义一个数据参数，并设置参数值为“one”，添加动态插槽名。

我们改一下数据参数值为“two”