2025年vue中插槽的用法(vue插槽有什么作用)

vue中插槽的用法(vue插槽有什么作用)父组件向子组件传递内容 扩展 复用 定制组件 把父组件中的数组 显示在子组件中 子组件通过一个 slot 插槽标签显示父组件中的数据 子组件 父组件 父组件中通过 slot 属性 给插槽命名 在子组件中通过 slot 标签 根据定义好的名字填充到对应的位置 这样就可以指定多个可区分的 slot 在使用组件时灵活的进行插值 子组件 父组件 用得不多 将子组件中 data 的数据传出 在父组件中使用 子组件渲染作用域插槽时 可以将子组件内部的数据传递给父组件



  • 父组件向子组件传递内容
  • 扩展、复用、定制组件

把父组件中的数组,显示在子组件中,子组件通过一个slot插槽标签显示父组件中的数据。

子组件

父组件

父组件中通过slot属性,给插槽命名,在子组件中通过slot标签,根据定义好的名字填充到对应的位置。这样就可以指定多个可区分的slot,在使用组件时灵活的进行插值。

子组件:

父组件:

用得不多。

将子组件中data的数据传出,在父组件中使用。子组件渲染作用域插槽时,可以将子组件内部的数据传递给父组件,让父组件根据子组件的传递过来的数据决定如何渲染该插槽。在标签中通过v-slot="要传过来的数据"来接收数据。

实现原理

实现原理:当子组件vm实例化时,获取到父组件传入的slot标签的内容,存放在vm. s l o t 中,默认插槽为 v m . slot中,默认插槽为vm. slot中,默认插槽为vm.slot.default,具名插槽为vm. s l o t . x x x , x x x 为插槽名,当组件执行渲染函数时候,遇到 s l o t 标签,使用 slot.xxx,xxx 为插槽名,当组件执行渲染函数时候,遇到slot标签,使用 slot.xxx,xxx为插槽名,当组件执行渲染函数时候,遇到slot标签,使用slot中的内容进行替换,此时可以为插槽传递数据,若存在数据,则可称该插槽为作用域插槽。

子组件:

父组件:

到此这篇关于Vue中slot插槽作用与原理详解的文章就介绍到这了,更多相关Vue slot插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

编程小号
上一篇 2025-02-21 16:17
下一篇 2025-02-16 17:11

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ri-ji/19389.html