Vue Props

本文已整理到 Github,地址 👉 blog

如果我的内容帮助到了您,欢迎点个 Star 🎉🎉🎉 鼓励鼓励 :) ~~

我希望我的内容可以帮助你。现在我专注于前端领域,但我也将分享我在有限的时间内看到和感受到的东西。


Props 是任何现代 JavaScript 框架的重要组成部分。

在组件之间传递数据的能力是 Vue 项目的基本要素。在 Vue3 中,访问 props 的方式与以前有所不同。

为什么使用 Props 很重要?

Props 是可在组件上注册的自定义属性,可让我们将数据从父组件传递到其子组件之一。

由于 Props 使我们能够在组件之间共享数据,因此它使我们可以将 Vue 项目和组件组织为更多的模块化组件。

Vue3 获取 props 的方式

在 Vue3 之前,组件的 propsthis 对象的一部分,可以通过使用 this.propName 进行访问。

但是,Vue3 的一大变化是 setup 方法的引入。this 不会具有它在 Vue2 中使用过的属性。

那么我们如何不使用 this 来使用 Vue3 props 呢?

setup 方法有两个参数:

  • context — 一个对象,它公开了曾经在 this 上的特定属性
  • props — 包含组件的 props 的对象

现在,我们只需要使用 props.propName,不再需要 this

setup (props, context) {
  // context 包含了 attrs、slots 和 emit
  console.log(props.propName) // 访问组件的一个 props
}

为什么 Vue3 Props 和 Vue2 不同?

Vue3 改变访问 props 的方式背后的主要动机是让它在组件/方法中更清晰。有时,在查看 Vue2 代码时,this 所指的可能是模糊的。

Vue 团队在设计 Vue3 时的一个大目标是使其在大型项目中更具可扩展性。其中一部分是将 Options API 重新设计为 Composition API,以便更好地组织代码。

Options API 和 Composition API 对比(看颜色划分即可):

Options API 和 Composition API 对比

关于 Composition API 的问题,可以查看 Composition API FAQ

通过去除 this 的引用,使用显式的 contextprops 变量,可以提高大型 Vue 项目的可读性。

如您所知,Vue3 Props 的工作原理与 Vue2 大致相同,主要的变化是我们如何在新的 setup 方法中访问它们。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值