无法在输入中显示更新的v模型值

Question

我有以下代码：

const BasicInput = {
  template: '<input v-model="content" @input="handleInput" />',
  prop: ["value"],
  data() {
    return {
      content: this.value
    };
  },
  methods: {
    handleInput(e) {
      this.$emit("input", this.content);
    }
  }
};

new Vue({
  el: "#app",
  data: { name: "" },
  mounted() {
    self = this;
    setTimeout(() => {
      self.name = "test";
    }, 2000);
  },
  components: { BasicInput }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <basic-input v-model="name"></basic-input>
  <p>
    <strong>Name:</strong> {{ name }}
  </p>
</div>

如何获取更新的v-model值，使其也显示在输入标签中？

Answer 1

您需要v-bind组件的属性。它的简称是BasicInput。

请参阅下面的:用法，仅对其进行更改。

<basic-input :value="name"></basic-input>

const BasicInput = {
  template: '<input v-model="content" @input="handleInput" />',
  prop: ["value"],
  data() {
    return {
      content: this.value
    };
  },
  methods: {
    handleInput(e) {
      this.$emit("input", this.content);
    }
  }
};

new Vue({
  el: "#app",
  data: { name: "" },
  mounted() {
    self = this;
    setTimeout(() => {
      self.name = "test";
    }, 2000);
  },
  components: { BasicInput }
});