Question

在我的vue应用程序中，我有很多很多输入字段（例子）：

<div class="field">
    <label for="name" class="label">Naam</label>

    <div class="control">
        <input id="name"
               name="name"
               type="text"
               v-model="relation.name"
               class="input"
               :class="{ 'is-danger': errorsHas('name') }"
               autofocus>

        <p class="help is-danger" v-if="errorsHas('name')">{{ error('name') }}</p>
    </div>
</div>

所以我想将它包装在input组件中。但是从第1节开始，.sync方法就消失了，我该怎么办呢？我猜，射击事件不是一个真正的解决方案。只是想知道如何解决这个问题？

我想有这样的事情：

<custom-input v-model=relation.name></custom-input>

其他一切（类名，自动对焦等......）必须在该组件中处理。

这可能吗？

Answer 1

在2.3.0+中重新引入了同步修饰符，请参阅Vue Js Docs。

在2.3.0+中，我们为道具重新引入了.sync修饰符，但这次只是语法糖自动扩展为另一个v-on监听器：

以下<comp :foo.sync="bar"></comp>扩展为：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

要让子组件更新foo的值，它需要显式发出事件而不是改变prop：

this.$emit('update:foo', newValue)

您可能会看到此fiddle作为示例。

Answer 2

您可以使用props更具体dynamic props。

只需设置一个适当的组件，该组件接受prop并引用组件prop中的v-model。

您的组件可能如下所示（来自official site的调整后的示例）：

Vue.component('custom-input', {
  // declare the props
  props: ['message'],
  // just like data, the prop can be used inside templates
  // and is also made available in the vm as this.message
  template: '<input v-model="message">'
})

虽然你的父母会这样使用它：

<custom-input :message="parentMsg"></custom-input>

Vue.js同步输入字段

2 个答案: