vue自定义组件v-model使用

// Super.vue
<template>
  <div>
    <!-- 符合预期 , 子组件触发input事件,改变testData值-->
    super {{testData}}
    <Child v-model = "testData"></Child>
    <!--相当于 <Child :value = "testData" @input ="val => testData = val"></Child>-->
  </div>
</template>
<script>
  import Child from './Child';

  export default {
    name: 'super',
    data() {
      return {
        testData:1
      };
    },
    components: {
      Child
    },
    methods:{
      a(){}
    }
  };
</script>

// Child.vue
<template>
  <div>
    child
    <el-button @click="addCount">点击按钮{{value}}</el-button>
  </div>
</template>
<script>
  export default {
    name: 'child',
    props: {
      // 自定义组件的v-model = "testData"的值 默认 在子组件上 :value = testData" " @input = "val=>testData = val"
      value: {}
    },
    data() {
      return {};
    },
    watch: {
      value() {
        console.log('value值改变了. . .');
      }
    },
    mounted() {
      console.log(this.value);
    },
    methods: {
      addCount() {
        // 是input事件而非change事件
        this.$emit('input', this.value + 1);
      }
    }
  };
</script>