当前位置:网站首页 > Vue.js开发 > 正文

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



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

把父组件中的数组,显示在子组件中,子组件通过一个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插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

到此这篇vue中插槽的用法(vue插槽有什么作用)的文章就介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • vue3 路由守卫(vue3路由守卫添加路由,不能访问)2026-02-24 10:54:10
  • redhat linux忘记root密码(redhat6.8忘记root密码的解决办法)2026-02-24 10:54:10
  • vue2和vue3的底层原理(vue2跟vue3)2026-02-24 10:54:10
  • redhat linux网络配置(redhat7.4配置网络)2026-02-24 10:54:10
  • vue2父子组件传值props(vue父子组件如何传递参数)2026-02-24 10:54:10
  • Vue安装脚手架(vue安装脚手架步骤)2026-02-24 10:54:10
  • jsj啥意思(jsjx是什么意思)2026-02-24 10:54:10
  • vue2升级3(vue2升级到vue3算重构吗)2026-02-24 10:54:10
  • 查询神兽还有多久刷新的指令100(查询神兽还有多久刷新的指令1.2)2026-02-24 10:54:10
  • map转json对象 fastjson(map转换为json对象)2026-02-24 10:54:10
  • 全屏图片