Инициализировать V-модель с помощью реквизита?

Question

Я пытаюсь создать компонент Vue, который использует v-модель.Начальное значение v-модели в конечном итоге будет исходить из родительского компонента или хранилища данных.Первый шаг, который я пытаюсь получить, - это инициализировать v-модель с помощью свойства.Я безуспешно пробовал следующее:

<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-модель?

EDIT

Я отказался от v-модели на данный момент и придумаю этоподход ... но это не очень "Vue-Ly" .. Я, по сути, использую детали реализации textarea (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"/>

Подробнее см. Использование v-модели для компонентов .