时间戳

首页 > 解决方案 > 如何同步 v-model 以使用包装器自定义 Vue 组件？

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

问题描述

我是 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。

标签： vue.jsvuejs2vue-component

解决方案

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

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

props: ['value']

推荐阅读