未通过 html 属性设置 Vue Web 组件道具

Question

我有一个带有数字属性的 vue web 组件，通过一些测试发现做这样的事情在设置属性值时不起作用...

<script src="https://unpkg.com/vue@2"></script>
<script src="./mycomponents.js"></script>

<my-component myProp="40"></my-component>

但这会...

<script src="https://unpkg.com/vue@2"></script>
<script src="./mycomponents.js"></script>

<my-component id="mycmp"></my-component>

<script type="module">
const myComponent = document.getElementById("mycmp");
myComponent.myProp = 40;
</script>

示例组件代码：

<template>
    <p>{{myProp}}</p>
</template>

<script>
export default {
    name: 'MyComponent',
    props: {
        myProp: {
            type: Number,
            default: 0
        }
    }
}
</script>

我猜这可能是一个时间问题，比如通过 html 属性进行操作时，组件尚未正确初始化？尽管我看到的其他人使用 vue web 组件的所有示例似乎都表明这应该是一个非常基本的用例。希望这只是我在做一些愚蠢的事情。

非常感谢任何帮助！

Answer 1

您可以尝试 setAttribute for prop 将其转换为字符串：

<my-component></my-component>

<script type="module">
  const myComp= document.querySelector("my-component");
  myComp.setAttribute("my-prop", JSON.stringify(40));
</script>

然后在你的组件中接收 prop 作为字符串并将其转换为数字（或者如果你需要对象 JSON.parse 它）：

<template>
  <p>{{ myPropNr }}</p>
</template>

props: {
  myProp: {
     type: String,
     default: 0
  }
},
computed: {
  myPropNr() {
    return Number(this.myProp)
  }
}

Answer 2

HTML 属性通常不会与 JavaScript 一对一匹配特性。在这种情况下，HTML 属性为 Vue.js 属性翻译与data-*相似属性。

Name conversion

dash-style to camelCase conversion

A custom data attribute name is transformed to a key for the DOMStringMap entry by the following:

Lowercase all ASCII capital letters (A to Z);

Remove the prefix data- (including the dash);

For any dash (U+002D) followed by an ASCII lowercase letter a to z, remove the dash and uppercase the letter;

Other characters (including other dashes) are left unchanged.

camelCase to dash-style conversion

The opposite transformation, which maps a key to an attribute name, uses the following:

Restriction: Before transformation, a dash must not be immediately followed by an ASCII lowercase letter a to z;

Add the data- prefix;

Add a dash before any ASCII uppercase letter A to Z, then lowercase the letter;

Other characters are left unchanged.

For example, a data-abc-def attribute corresponds to dataset.abcDef.

将此应用于您的场景，我们可以跳过第 2 步（ data- 部分）并像这样写属性：

<my-component my-prop="40"></my-component>

未通过 html 属性设置 Vue Web 组件道具

Vue web component prop not being set through html attribute

javascript

web-component

vue.js

Name conversion