Vue自定义组件的v-model的双向绑定

父组件

<test-model v-model="fData"></test-model>

子组件 test-model

<template>
  <div>
    {{sData}}
  </div>
</template>
<script>
 export default {
 props:{
        value: {}    //获得父组件的绑定v-model的值
      },
 computed:{
        sData:{   //在子组件内用sData接收父组件的绑定的v-model值 
          get(){
            return this.value;
          },
          set(val){
            this.$emit('input',val)
          }
        }
      }
}

</script>

这样无论在父组件改fData或是子组件内改sData 都实现了数据统一。