如何理解v-model的实质为语法糖

前言

Vue有很多语法糖，但是我们往往会忽略v-model也是一个语法糖，误以为它只是一个简单的监听绑定数据作用。

v-model实质

<input v-model="something">
实质上等同于
<input v-bind:value="something" v-on:input="something = $event.target.value">

v-model=”something”则表示将value值绑定在something上，当值发生改变时触发绑定的oninput事件。oninput事件绑定的函数是将触发oninput事件的目标（该input）的value值赋值给something这个变量。

遇到的问题

在写父子组件间的传值的时候，在子组件中定义一个props的变量，然后再去给它绑定到一个子组件的model里。其实子组件也是调用的别人的UI框架。代码如下，

<md-popup v-model="isPopupShow"></md-popup>
props: {
  isPopupShow: {
    type: String,
    default: false,
  }
}

这时候在点击蒙版关闭掉弹窗时，会报错，不能在子组件里修改props变量。

@import “../imgs/model_error.jpg”;

解决方法：
点击蒙版时向父组件emit一个关闭事件，让父组件去关闭弹窗的属性值。

<md-popup :value="isPopupShow" @input="handleClickMask"></md-popup>

this.$emit('click-mask', true);

父组件接收子组件的事件，修改传给子组件的值

<zujian @click-mask="handleClose"></zujian>
handleClose() {
  this.isPopupShow = false;
}