如何访问名称包含破折号的 vue 道具？

Question

我正在做一个 Vue 项目。根据 eslint 的要求，我不能用 camel case 命名道具，它会报告警告 Attribute ':clientId' must be hyphenated. eslint vue/attribute-hyphenation is required to use kekab case instead。例如，

<GranfFather :client-id="clientId" v-bind="$attrs">
  <Father>
    <GrandSon />
  </Father>
</GrandFather>

我需要访问 <GrandSon /> 组件中的属性。一般我想把属性命名为clientId，但是由于公司要求eslint，只能命名为client-id，否则将报告警告。所以，如果我想访问这个属性，我想出的唯一方法就是使用 this.$attrs["client-id"]。但我想知道如何通过 this.$attrs.clientId 或类似方法访问此属性？

当我在 <GrandSon /> 组件中使用 this.$attrs 时，它打印

{ client-id: "xxxxxx" }

这是否意味着我只能通过 this.$attrs["clientId"] client-id？我想要的是仅通过使用 this.$attrs.clientId.

访问 client-id

Answer 1

有区别props and attributes。

prop 应该在组件 props 中指定，它被规范化为驼峰大小写并且仅由提供 prop 的组件接收。

属性未规范化，可以 fall through 组件用作根元素。此行为由组件中的 inheritAttrs 属性决定。它通常用于为根 HTML 元素提供 HTML 属性，但也可用于为最近的接受它的嵌套组件提供属性。

如果GrandSon接收clientIdprop，需要在props的组件中声明。尽管在这种情况下它显然可以从 GrandFather 接收作为 fallthrough 属性的道具，但最好将其显式提供为 <GrandSon :client-id="clientId"> 以便它不依赖于根元素的特定层次结构。

如何访问名称包含破折号的 vue 道具？

How to access vue props with name contains dash sign?

typescript

vue.js

vue-props