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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。