Question

我的自定义组件在做什么错了？

我想要的是：

标签
输入

为什么idfor未定义？为什么我在labeltext

上收到此错误

无效的表达式：“超级英雄名称”中的意外标识符

labeltext应该是字符串，我应该可以传递我喜欢的任何字符串吗？

这是我到目前为止所拥有的。 jsfiddle

Vue.component("base-input", {
  props: {
    value: {
      type: String,
      required: true
    },
    idfor: {
      type: String,
      required: true
    },
    labeltext: {
      type: String,
      required: true
    }
  },
  template: 
  `
  <div>
    <label for="idfor">{{labeltext}}</label>
    <input type="text" id="idfor" v-bind:value="value" v-on:input="$emit('input', $event.target.value)">
  </div>
  `
});

Vue.config.devtools = true;

new Vue({
  el: "#app",
  data() {
    return {
      user: {
        name: "Hulk",
        age: 42
      }
    };
  }
});

HTML

<div id="app">
    <base-input v-bind:idfor="name" v-bind:value="user.name" v-bind:labeltext="Name of superhero"/>
</div>

Answer 1

这是因为v-bind:labeltext=将值作为表达式求值。而且，如果您需要传递字符串，则需要将其用引号引起来，例如

v-bind:labeltext="'Name of superhero'"

更新了fiddle

Answer 2

有一个问题，您只需要确保将''的{{1}}包括在内即可

literals

自定义组件，错误编译模板

2 个答案: