v-model 和子组件？

Question

我有一个表单并使用 v-model 绑定一个输入：

 <input type="text" name="name" v-model="form.name">

现在我想提取输入并使其成为自己的组件，然后如何将子组件的值绑定到父对象 form.name ？

原文由 panthro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如文档中所述，

v-model 是语法糖：

>  <input
>  v-bind:value="something"
>  v-on:input="something = $event.target.value">
>
> ```

要为自定义组件实现 `v-model` 指令：

- 为组件指定一个 `value` 道具
- 使用内部值的 [计算设置器](https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter) 创建计算属性（因为您不应该从组件内修改道具的值）
- 为计算属性定义一个 `get` 方法，该方法返回 `value` 属性的值
- 为计算属性定义一个 `set` 方法，该方法会在属性更改时发出 `input` 事件，并带有更新的值

这是一个简单的例子：

Vue.component(‘my-input’, { template: <div> My Input: <input v-model="inputVal"> </div> , props: [‘value’], computed: { inputVal: { get() { return this.value; }, set(val) { this.$emit(‘input’, val); } } } })

new Vue({ el: ‘#app’, data() { return { foo: ‘bar’ } } })

{{ foo }}

“`

感谢 @kthornbloom 发现了先前实现的问题。

Vue 3 中的重大变化

根据文档，Vue 3 中的 v-model 实现发生了重大变化：

• value -> modelValue
• input -> update:modelValue

原文由 thanksd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在子组件中指定 :value 和 @input 事件，然后您可以在父组件中使用 v-model 语法。

Vue 2

我的输入.vue

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

<script>
export default {
  props: ['value']
};
</script>

屏幕.vue

 <template>
  <my-input v-model="name" />
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  components: { MyInput },

  data: () => ({
    name: ''
  })
};
</script>

视图 3

我的输入.vue

 <template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script>
export default {
  props: ['modelValue']
};
</script>

屏幕.vue

 <template>
  <my-input v-model="name" />
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  components: { MyInput },

  data: () => ({
    name: ''
  })
};
</script>

原文由 Cameron Wilby 发布，翻译遵循 CC BY-SA 4.0 许可协议