Vue2中的关于$event,v-model的语法糖、以及model模式和.sync的理解

$event是啥

1. 当我们直接绑定在一个标签上的时候，$event就是原生事件
2. 当我们监听一个事件的时候，$event就是$emit的第二个参数
   点击原文
   

先说明下，以下下代码不可以直接复制，因为为了看得直观一点，删除了一些不必要的标签

v-model语法糖

官方指路

所以说v-model就是语法糖，语法糖又是啥？就是一些本来复杂的语法给你简化了。
在一个input中的v-model

这样的写法：

<input type="text" v-model="input">

等价于↓↓↓↓的写法:

<input type="text" :value="inputVal" @input="inputVal = $event.target.value">

自定义的双向绑定是以下写法：

#父组件-------------------------------------------------------------------------------
<selecComponentst :selectedId="selectedId" @handleSelect="selectedId = $event"></selecComponentst>
<script>
data () {
  return {
  	selectedId:'1'
  }
}
</script>
----------------------------------------------------------------------------------------



#子组件-------------------------------------------------------------------------------
<template>
  <select :value="selectedId" @change="$emit('handleSelect',$event.target.value)">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</template>

<script>
export default {
  props:['selectedId'],
}
</script>
----------------------------------------------------------------------------------------

又等价↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

子组件：$emit事件使用input事件，然后props使用value接收父组件数据

父组件: 使用v-model语法糖来进行缩写，缩写了啥呢？
请看下面的官方描述：

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event

原文指路

所以下面又可以这样子写

#父组件-------------------------------------------------------------------------------
   <selecComponentst v-model="selectedId"></selecComponentst>
    <!-- 等价↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
   <selecComponentst :value="selectedId" @input="selectedId = $event"></selecComponentst>
<script>
data () {
  return {
  	selectedId:'1'
  }
}
</script>
----------------------------------------------------------------------------------------



#子组件-------------------------------------------------------------------------------
<template>
  <select :value="value" @change="$emit('input',$event.target.value)">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</template>

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

在一个input中的v-model

这样的写法：

<input type="text" v-model="input">

等价于下面的写法:

<input type="text" :value="inputVal" @input="inputVal = $event.target.value">

在一个自定义组件中

组件的双向绑定是以下写法：

#父组件-------------------------------------------------------------------------------
<selecComponentst :selectedId="selectedId" @handleSelect="selectedId = $event"></selecComponentst>
<script>
data () {
  return {
  	selectedId:'1'
  }
}
</script>
----------------------------------------------------------------------------------------



#子组件-------------------------------------------------------------------------------
<template>
  <select :value="selectedId" @change="$emit('handleSelect',$event.target.value)">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</template>

<script>
export default {
  props:['selectedId'],
}
</script>
----------------------------------------------------------------------------------------

又等价↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

子组件：$emit事件使用input事件，然后props使用value接收父组件数据,

父组件: 使用v-model语法糖来进行缩写，缩写了啥呢？
请看下面的官方描述：

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event

原文指路

所以下面又可以这样子写

#父组件-------------------------------------------------------------------------------
   <selecComponentst v-model="selectedId"></selecComponentst>
    <!-- 等价↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
   <selecComponentst :value="selectedId" @input="selectedId = $event"></selecComponentst>

<script>
data () {
  return {
  	selectedId:'1'
  }
}
</script>
----------------------------------------------------------------------------------------



#子组件-------------------------------------------------------------------------------
<template>
  <select :value="value" @change="$emit('input',$event.target.value)">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</template>

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

model模式

上面其实有提到过，默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event

其实我们的v-model默认绑定的prop和event也是可以修改的呢。

我们通过一个model属性来修改v-model默认绑定的属性:

子组件↓：

#子组件
<template>
  <select :value="selectedId" @change="$emit('handleChange',$event.target.value)">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</template>

<script>
export default {
  model: {
    prop: 'selectedId',
    event: 'handleChange'
  },

  props:['selectedId'],
}
</script>

父组件↓：

#父组件
<selecComponentst v-model="val"></selecComponentst>

又等价↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<selecComponentst :selectedId="val" @handleChange="val = $event" />

<script>
export default {
  data () {
    return {
      selectedId:'1'
    }
  }
</script>

这里好像说当默认的值有其他用途的时候，我们可以这么来该，因为我没遇到这个使用场景，所以我就不在过多赘述了，详细看官方教程
点击官方API指路
官方教程

.sync

这个的用法呢

​ 在有些情况下，我们可能需要对一个 prop 进行“双向绑定

官方指路

父组件↓↓↓↓

#父组件
<selecComponentst :selectedId.sync="val" />
<!-- 等价↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
<selecComponentst :selectedId="val" @update:selectedId="val = $event" />

<script>
export default {
  data () {
    return {
      val:'1'
    }
  },
}
</script>

子组件↓↓↓↓

#子组件
<template>
  <select :value="selectedId" @change="$emit('update:selectedId',$event.target.value)">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</template>

<script>
export default {
  props:['selectedId'],
}
</script>

这样子就可以对一个单一的prop进行一个双向绑定啦
当然我们的.sync也是可以对对象进行绑定的，这里不就不赘述了，请看官网
官方指路

其实学vue2最好的教程就是官方文档！
VUE2教程