v-model与.sync修饰符原理分析

1.v-model

简单来说，就是

• 视图改变，变量也改变
• 变量改变，视图也改变
• 基于v-bind:value与v-on:input的语法糖
• 一种双向绑定

1.1 原生input组件

// xxx为内部数据，add为内部方法
// <input :value="xxx" @input="xxx=$event.target.value">
// 等价于
// <input v-model="xxx">

<template>
  <div>
    {{xxx}}
    <input :value="xxx" @input="xxx=$event.target.value">
    <button @click="add">+1</button>
  </div>
</template>

1.2 自定义input组件

//定义组件
<template>
  <div>
    {{xxx}}
    <input :value="xxx" @input="$emit('input',$event.target.value)">
  </div>
</template>

<script>
  export default {
    name: 'Child',
    props: {
      xxx: {
        type: String
      }
    },

  }
</script>

//引用Child组件
// <Child :xxx="zzz" @input="zzz=$event"/>
// 等价于
//<Child v-model="zzz" />
<template>
  <div id="app">
    <Child :xxx="zzz" @input="zzz=$event"/>
    <button @click="add">+1</button>
  </div>
</template>

<script>

  import Child from './components/Child'

  export default {
    name: 'App',
    components: {Child},
    data() {
      return {
        zzz: '0'
      }
    },
    methods: {
      add() {
        this.zzz += 1
      }
    }
  }
</script>

2 .sync修饰符

• 就是一种事件发布与订阅

//发布事件
//money为props
<button @click='$emit('update:value',money-100)'></button>
export defalt Button

//订阅(监听)事件
//total为内部数据
components:{Button}
<Button :money='total' v-on:update:value='total=$event' />
//等价于
<Button :money.sync='total' />