如何判断一个 prop 是否已显式传递给 Vue 3 中的组件答案

【问题标题】：How to tell whether a prop has been explicitly passed in to a component in Vue 3如何判断一个 prop 是否已显式传递给 Vue 3 中的组件
【发布时间】：2023-12-16 15:44:01
【问题描述】：

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

换句话说，如果我有一个使用默认值声明的道具，像这样：

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

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

<Greeting name="Friend" />

还有这个：

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

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

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

在 Vue 2 中，您可以为此使用 this.$options.propsData — 它只包含直接传入的属性。但是，它一直是 removed in Vue 3。

【问题讨论】：

我认为他们希望您使用 Symbol() 作为默认值，然后在您的 setup() 函数中检查该值。这里的例子v3.vuejs.org/api/composition-api.html#setup
这样做的唯一方法；我看到的方法是将默认道具值设置为null。然后从setup 函数中检查该值是否为null（这意味着）未明确设置。但是如果你想显式设置null 这将不起作用。如果您详细说明您需要这个的原因，也许我们可以想到更好的方法。

标签： vue.js vuejs2 vue-component vuejs3

【解决方案1】：

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

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

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

【讨论】：