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。

如何在组件中使用v模型值

1 个答案: