vue.js - v-model 和子组件？

Question

我有一个表单并使用 v-model 绑定(bind)输入:

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

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

Answer 1

As stated in the documentation ,

v-model 是语法糖:

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

为自定义组件实现 v-model 指令:

• 为组件指定一个 value 属性
• 使用 computed setter 创建一个计算属性对于内部值(因为您不应该从组件内部修改 prop 的值)
• 为返回 value 属性值的计算属性定义一个 get 方法
• 为计算属性定义一个 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' 
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <!-- using v-model... -->
  <my-input v-model="foo"></my-input>
  
  <!-- is the same as this... -->  
  <my-input :value="foo" @input="foo = $event"></my-input>

  {{ foo }}
</div>

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

Vue 3 中的重大变化

Per the documentation ，Vue 3 中的 v-model 实现发生了重大变化:

• value -> modelValue
• 输入 -> update:modelValue