vuejs2 - 使用 Prop 初始化 v-model？

Question

我正在尝试创建一个使用 v-model 的 Vue 组件。 v-model 的初始值最终将来自父组件或数据存储。我尝试开始工作的第一步是使用属性初始化 v-model。我尝试了以下但没有成功:

<template>
  <div>
    <textarea
      v-model="text"
    ></textarea>
  </div>
</template>

<script>
export default {
  props: { initialValue: String },
  data() {
    return {
      text: this.props ? this.props.initialValue : 'This is a test'
    }
  }
}
</script>

并按如下方式从父级使用它:

<MyComponent initialValue="Hello World" />

该组件显示“这是一个测试”，而不是我希望的“Hello World”。初始化使用 v 模型的组件的正确方法是什么？

编辑

我现在已经放弃了 v-model 并提出了这种方法......但它感觉不是很“Vue-ly”..我基本上是在挖掘文本区域的实现细节(eve.srcElement .value.length)，当我觉得我应该利用域对象时......有没有更好的方法来做到这一点？请注意，在 textChange 事件中，我最终会为其他组件发出通知。

<template>
  <div>
    <textarea
      :value="initialValue"
      @change="textChange"
      @keyup="textChange"
      placeholder="Type your text here"
    ></textarea>
  </div>
</template>

<script>
export default {
  props: { initialValue: String },
  methods: {
    textChange: function(evt) {
      console.log('Length: ' + evt.srcElement.value.length)
    }
  }
}
</script>

Answer 1

v-model 利用 value 属性。您需要发出 input 事件，然后更新父级中的值。

MyComponent.vue

<template>
  <div>
    <textarea :value="value" @input="$emit('input', $event.target.value)"></textarea>
  </div>
</template>

<script>
export default {
  props: ['value']
}
</script>

Parent.vue

<MyComponent v-model="val"/>

参见 Using v-model on Components了解更多详情。