如何同步v-模型以自定义Vue组件和包装器？

Question

我是VueJ的新手。我想用这样的包装来创建定制组件：

template: `<div class="wrapper">
            <input name="name" /> 
          </div>`,

当使用组件时，我想添加v模型，

 <my-component v-model="form.input" />

但实际上，模型的值只是绑定到包装器上，而不是绑定到输入。如果我改变模型

形式：{输入：“编辑”}

该值仅绑定到包装器，如：

  <div class="wrapper" value="edited">
        <input name="name" /> 
   </div>    

对我的问题有什么建议吗。我用的是Vuejs-2。

Answer 1

至少，您需要这样做：

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

props: ['value']