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.具名插槽,可以为请求来的数据,更改排列顺序和方式,还有排列样式。