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

【问题标题】：Custom component , error compiling template自定义组件，错误编译模板
【发布时间】：2019-01-18 01:23:14
【问题描述】：

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

我想要的是拥有：

标签
输入

为什么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>

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

有一个问题，您只需要确保将'' 包含在literals 中

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

【讨论】：

【解决方案2】：

这是因为v-bind:labeltext= 将值作为表达式进行计算。如果你需要传递一个字符串，那么你需要把它用引号括起来，比如

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

更新fiddle

【讨论】：