乐趣区

关于前端:深入理解-vmodel-的原理

v-model即能够作用于表单元素,又可作用于自定义组件,无论是哪一种状况,它都是一个语法糖,最终会生成一个属性和一个事件

当其作用于表单元素时 vue 会依据作用的表单元素类型而生成适合的属性和事件。例如,作用于一般文本框的时候,它会生成 value 属性和 input 事件,而当其作用于单选框或多选框时,它会生成 checked 属性和 change 事件。

    <!-- 一般表单元素 -->
     <input type="text" v-model="msg" />
    <!-- 等效于 -->
    <input type="text" value="msg" @input="msg = $event" />

    <!-- 单选框 -->
    < input type="radio" v-model="check" />
     <!-- 等效于 -->
    <input type="radio" checked="check" @change="check = $event" />

作为一般文本框

作为单选框或多选框的时候

v-model也可作用于自定义组件,当其作用于自定义组件时 ,默认状况下,它会生成一个value 属性和 input 事件;能够通过组件的 model 配置来扭转生成的属性和事件

<Comp v-model="data" />
<!-- 等效于 -->
<Comp :value="data" @input="data=$event" />
// Comp
const Comp = {
  model: {
    prop: "number", // 默认为 value
    event: "change" // 默认为 input
  }
  // ...
}
<Comp v-model="data" />
<!-- 等效于 -->
<Comp :number="data" @change="data=$event" />
退出移动版