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”
以上是 vue插槽讲解 的全部内容， 来源链接： utcz.com/z/375834.html
