如何在组件中使用 v-model 值

Question

我创建了一个使用 v-model 值的 vue 组件：

Vue.component('dynamic-component', {
    props: ['message'],
    template: '<p>The message: {{message}}</p>'
});

这是我的 vue 实例

var vm = new Vue({
    el: '#app',
    data: function() {
        return {message: ''}
    },
});

这是HTML：

<div id="app">
        <textarea v-model="message"  placeholder="add multiple lines"></textarea>
 <p>
 <dynamic-component v-show="message"></dynamic-component>
 </p>
</div>

{{message}} 值未出现在放置的模板中。我该怎么办？

Fiddle

Answer 1

您需要将消息实际传递到该组件中，如下所示：

<div id="app">
  <textarea v-model="message" placeholder="add multiple lines"></textarea>
  <p>
    <dynamic-component :message="message" v-show="message"></dynamic-component>
  </p>
</div>

Fiddle.