Vue插槽的使用

1.编译作用域

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

2.后备内容

Vue插槽的使用_第1张图片
子组件
Vue插槽的使用_第2张图片
父组件
效果图

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

父组件

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

3.具名插槽

Vue插槽的使用_第3张图片
子组件
Vue插槽的使用_第4张图片
父组件

具名插槽在子组件中的  里面添加 name='自定义名字' 即可。一个不带 name 的  出口会带有隐含的名字“default”,任何没有被包裹在带有 v-slot 的