vue自定义组件v-model父子组件传值双向绑定

(一)表单输入中v-model

<input v-model="something">

v-model指令其实是下面的语法糖包装而成

<input
  :value="something"
  @:input="something = $event.target.value">

我的理解是表单中就是去动态读取值

(二) 自定义组件中v-model

在一个组件上使用 v-model 时

vue里面自定义组件v-model的语法糖：

<custom v-model='something'></custom>

等于

<custom :value="something" @input="value => { something = value }"></custom>

在vue2.0中自定义组件v-model使用是:

因此，对于一个带有 v-model 的组件，它应该如下：

• 接收一个 value prop
• 触发 input 事件，并传入新值 利用 $emit 触发 input 事件：

// 组件
<custom v-model='something'></custom>
// 组件内部  <input v-model="something">
// 组件内部监听
watch:{
  newValue(){
    this.$emit('input', this.newValue)
  }
}

默认值为value,可以通过model定义

在vue3.0中自定义组件v-model使用是:

在vue3.0中时有所改变的,原理是相同的

使用自定义组件v-model

内部去派发的是update事件,默认prop的value改为modelValue

组件内部

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称：

官方文档