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>

作者：圆梦人生
链接：https://www.jianshu.com/p/d542cb29aa97