如何同步 v-model 以使用包装器自定义 Vue 组件？答案

【问题标题】：How to sync v-model to customize Vue component with wrapper?如何同步 v-model 以使用包装器自定义 Vue 组件？
【发布时间】：2019-12-18 07:12:00
【问题描述】：

我是 VueJs 的新手。我想用这样的包装器创建自定义组件：

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

使用组件时，我想添加v-model，

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

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

表单：{ 输入：“已编辑”}

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

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

对我的问题有什么建议吗？我正在使用 Vuejs-2。

【问题讨论】：

【解决方案1】：

至少，您需要执行以下操作：

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

props: ['value']

【讨论】：