Vue插槽的使用

1.编译作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

2.后备内容

子组件 父组件 效果图

父级组件中不提供任何插槽内容，页面就会渲染Submit。

父组件

如果组件中提供了内容，这个内容将会被渲染出来，因此取代了Submit这个后备内容。

3.具名插槽

子组件 父组件

具名插槽在子组件中的 <slot><slot> 里面添加 name='自定义名字' 即可。一个不带 name 的 <slot> 出口会带有隐含的名字“default”，任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容，在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。

4.作用域插槽

父组件 子组件 效果图

这里面是为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去，绑定在 <slot> 元素上的 attribute 被称为插槽prop，然后在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字

vue里面使用插槽的好处：

1.抽离代码，使代码分离，提高组件化，为后续代码做更好的复用和维护，强调各个组件的功能性；

2.具名插槽，可以为请求来的数据，更改排列顺序和方式，还有排列样式。