VUE之插槽的理解和使用

插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,默认情况下组件内部包裹的内容是不会显示的,如果需要进行显示则需要通过插槽来进行显示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。

匿名插槽:

            v-slot 后面没有名字
            在组件内部通过<slot></slot>进行接收

子组件中占位


image.png

在父组件中给这个占位符填充内容:


具名插槽:

一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中。
v-slot:插槽的名称
在组件内部通过<slot name="插槽的名称"></slot>进行接收
子组件插槽


image.png

父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中


image.png

插槽作用域:

常用的一种子传父的通信方式,作用域插槽其实就是带数据的插槽,即带参数的插槽,简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用,父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

语法:v-slot:插槽名称(可选 如果不写默认是default) = "变量(这个变量是一个对象)"

作用:让组件来提供自身需要显示的内容
子组件:


image.png

父组件:


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。