vue插槽slot

插槽有三种：

目录

1.普通插槽

2.具名插槽

3.作用域插槽

---

1.普通插槽

sub.vue 子组件 --- 子组件写slot标签，父组件的Sub标签内填写的内容会显示在slot的位置，父组件如果不写内容就会展示默认内容。

index.vue 父组件

展示效果：

2.具名插槽

sub.vue 子组件 --- 用name属性定义每个插槽的名字

index.vue 父组件 --- 父组件通过#号匹配子组件中对应的插槽位置

展示效果：

3.作用域插槽

sub.vue 子组件 --- message和count为子组件要传递给父组件的数据

index.vue 父组件 --- 子组件传递过来的内容可以在父组件中使用，比如列表中点击取值

或者：另一种写法---配合具名插槽

sub.vue 子组件  

index.vue 父组件

展示效果：