vue : v-model语法糖及.sync修饰符，实现父组件和子组件的数据双向绑定

1、v-model 语法糖

语法糖：v-model本质上是 value属性和input事件的一层包装

v-model的作用：提供数据的双向绑定

① 数据发生了改变，页面会自动变  v-bind:value

② 页面输入改变 ， 数据会自动变化  v-on:input

我们经常遇到一种场景：

1. 父组件提供一个数据给子组件使用（父传子）

2. 子组件又需要修改父组件传过来的这个数据，所以需要子传父把值传给父组件。（子传父）

这种场景可以使用v-model进行简写。

 

使用步骤 ：

1、在父组件中，组件上写v-model=“变量”，变量需在父组件data中已声明；

<add-reduce v-model="number"></add-reduce>

2、子组件通过props接收value属性，v-model绑定的是value属性，所以接收的值必须写value，不可以自定义为其他变量名；

export default {
    // props:['value','msg'],
    props:{
        value: Number,
    },
}

3、子组件要修改数据，必须是input事件

    <button @click="$emit('input',value - 1)">-</button>
    {{value}} 
    <button @click="$emit('input',value + 1)">+</button>

这样就实现了实现父组件和子组件的数据双向绑定，v-model实际上是帮我们给子组件绑定了一个value属性，并且帮父组件监听了子组件发过来的input事件。

注意：在父组件中，组件只能绑定有一个v-model。

如果需要绑定绑定多个属性，可以使用.sync修饰符

2、.sync修饰符绑定多个属性

语法： :属性名.sync="变量名"，变量名需在data中已声明

（1）在父组件中，组件上写:属性名.sync="变量名"，属性名可自定义，与子组件接收的名称一致即可；

  //变量msg需在data中已声明
 <add-reduce v-model="number" :msg.sync="msg"></add-reduce>

（2） 子组件通过props接收属性；

export default {
    // props:['value','msg'],
    props:{
        value: Number,
        msg: String
    },
}

（3）子组件要修改数据，语法为$emit('update:变量名',变量修改后的值)"。注意，必须是写update

<p>{{msg}}</p>
    <button @click="$emit('update:msg','修改后的信息')">修改信息</button>

这样，通过.sync修饰符就可以实现父组件和子组件的数据双向绑定了。