vue 插槽（vue 插槽嵌套）



在使用组件时，在引用的组件标签中添加内容时，会自动被组件中的模板代替，如【例1】

【例1】

【结果】

当不想要传递给组件的内容被替代，则可以使用组件插槽来解决这个问题，具体使用方法是，在组件模板中添加 标签，当组件渲染时， 将会被替换为“写在组件标签结构中的内容”，如【例2】

【例2】

【结果】

 【注】

1. 插槽内可以包含任何模板代码，包括 HTML 和其他组件
2. 如果组件没有包含 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃

因为父级模板里的所有内容都是在父级作用域中编译的，子模版里的所有内容都是在子作用域中编译的，所以插槽不能访问其所在组件的作用域，而是模板的作用域，如【例3】

【例3】

【结果】

默认插槽即，若在组件引用时，没有像其传递内容，则使用默认插槽的内容（也称为后备内容）；若在引用时，传递了内容，则渲染传递的内容，如【例4】

【例4】

组件

未传递内容

【结果】

传递内容

【结果】

（1）具名插槽使用

若在一个组件中需要使用多个插槽，则要使用具名插槽来区分，其使用方式为：在组件中的  元素上使用一个特殊的特性 name，利用这个特性可以定义额外的插槽；在引用组件时，需要在

【注】一个不带name的 会带有隐含的名字“default”。

【例5】

 【结果】

【注】v-slot 只能添加在

（2）具名插槽的缩写

【注】该缩写只有在其有参数时可以使用 

为了能够让插槽内容访问子组件的数据，可以将子组件的数据作为绑定在 元素的一个特性（插槽 prop），则在父级作用域中，可以给v-slot带一个值来定义所提供的插槽 prop 名字，如【例6】

【例6】

 【结果】

（1）独占默认插槽的缩写语法

当被提供的内容只有默认插槽时，组件的标签可以被当作插槽的模板来使用，此时，可以将 v-slot 直接用在组件上，且可以缩写为以下形式：

【注】默认插槽的缩写语法不能和具名插槽混用，会导致作用域不明确，即只要出现多个插槽，就需要为所有的插槽使用完整的基于

（2）解构插槽 Prop

使用结构传入具体的插槽prop会使模板更简洁

根据解构的语法，还可以给 prop 重命名

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/41276.html