创新互联VUE3教程：Vue 3.0 Slot统一

#概览

此更改统一了 3.x 中的普通 slot 和作用域 slot。

清河门ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！

以下是变化的变更总结：

• this.$slots 现在将 slots 作为函数公开
• 非兼容：移除 this.$scopedSlots

更多信息，请继续阅读！

#2.x 语法

当使用渲染函数时，即 h，2.x 用于在内容节点上定义 slot data property。

// 2.x 语法
h(LayoutComponent, [
  h('div', { slot: 'header' }, this.header),
  h('div', { slot: 'content' }, this.content)
])

此外，在引用作用域 slot 时，可以使用以下方法引用它们：

// 2.x 语法
this.$scopedSlots.header

#3.x 语法

在 3.x 中，插槽被定义为当前节点的子对象：

// 3.x Syntax
h(LayoutComponent, {}, {
  header: () => h('div', this.header),
  content: () => h('div', this.content)
})

当你需要以编程方式引用作用域 slot 时，它们现在被统一到 $slots 选项中。

// 2.x 语法
this.$scopedSlots.header


// 3.x 语法
this.$slots.header

#迁移策略

大部分更改已经在 2.6 中发布。因此，迁移可以一步到位：

1. 在 3.x 中，将所有 this.$scopedSlots 替换为 this.$slots。

标题名称：创新互联VUE3教程：Vue 3.0 Slot统一
标题路径：http://www.36103.cn/qtweb/news47/3747.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联