32.Vue 自定义组件使用v-model

在Vue2中自定义组件可以使用v-model指令，来实现双向绑定，前提条件：
1、接收一个value属性
2、在有新的value时触发intput事件

案例

index.vue

<template>
  <div>
      total值：{{total}}  <br/> <br/>
      <testVue v-model="total"></testVue>
  </div>
</template>
<script>
import testVue from './testVue'
export default {
  data(){
    return {
      total: 0    
    }
  },
  components: {
     testVue 
  }
}
</script>

testVue.vue

<template>
<div>
  传入的值： {{value}} <br/>
  <button @click="changeVal">改变值</button>
</div>
</template>
<script>
export default {
  data(){
    return {
      counter: 0
    }
  },
  propos: {
    // 接收外部通过v-model传入的只，必须是value
    value: {}
  },
  methods: {
    changeVal(){
      this.$emit('input', this.counter++)
    }
  }
}
</script>