时间戳

首页 > 解决方案 > 如何判断一个 prop 是否已显式传递给 Vue 3 中的组件

vue.js - 如何判断一个 prop 是否已显式传递给 Vue 3 中的组件

问题描述

有没有办法从 Vue 3 组件中得知哪些 props 被显式传入（即，作为父模板中组件标签上的属性）——而不是未设置并从默认值接收它们的值？

换句话说，如果我有一个使用默认值声明的道具，如下所示：

props: {
  name: {
    type: String,
    default: 'Friend'
  }
}

我如何分辨这之间的区别：

<Greeting name="Friend" />

和这个：

<Greeting />   <!-- name defaults to 'Friend' -->

在这两种情况下，组件的nameprop 将具有相同的值，在第一种情况下被显式传递，在第二种情况下被分配默认值。

Vue 3 中是否有系统的方法来确定差异？

在 Vue 2 中，您可以使用this.$options.propsData它——它只包含直接传入的属性。但是，它在 Vue 3 中已被删除。

标签： vue.jsvuejs2vue-componentvuejs3

解决方案

此信息可能在具有getCurrentInstance低级 API 的组件实例中可用，但没有记录的方法，也没有有效的理由来区分===相等的默认值和指定的 prop 值。

如果默认道具值应该与明确指定的相同值不同，这意味着默认道具值不是这种情况，它应该以其他方式指定，例如通过计算：

const name = computed(() => {
 if (props.name == null) {
   console.log('default');
   return 'Friend';
 } else
   return props.name;
});

推荐阅读