Vue自定义组件实现v-model双向数据绑定的方法

<template>
  <div>
    <div>双向数据绑定：{{$props.value}}</div>
    <div><button @click="addValue">点击++</button></div>
  </div>
</template>
​
<script>
export default {
  name: "MySon",
  props: ['value'],
  methods: {
    addValue() {
      //  触发父组件中v-model绑定数据的变化，由于不能改变props数据中的值，所以不要写this.$props.value++这样的操作
      this.$emit('input', this.$props.value + 1)
    }
  }
}
</script>

<template>
  <div>
    <div>双向数据绑定：{{$props.value666}}</div>
    <div><button @click="addValue666">点击++</button></div>
  </div>
</template>
​
<script>
export default {
  name: "MySon",
  props: ['value666'],
  // --> 配置接收v-model数据的属性以及改变数据的事件 <--
  model: {
    prop: 'value666',
    event: 'updateValue666'
  },
  methods: {
    addValue666() {
      this.$emit('updateValue666', this.$props.value666 + 1)
    }
  }
}
</script>

<template>
  <div id="app">
    <MySon v-model="num"></MySon>
  </div>
</template>
​
<script>
import MySon from "@/components/MySon.vue";
export default {
  name: 'App',
  components: {
    //注册子组件
    MySon
  },
  watch: {
    //  监视num数据的变化  
    num(newValue, oldValue) {
      console.log('num: ' + oldValue + ' -> ' + newValue)
    },
  },
  data() {
    return {
      num: 10,
    }
  },
}
</script>

<template>
  <div>
    <div>sync双向数据绑定：{{$props.data}}</div>
    <div><button @click="addData">点击++</button></div>
  </div>
</template>
​
<script>
export default {
  name: "MySon",
  //    用props.data属性接收双向绑定的数据  
  props: ['data'],
  methods: {
    addData() {
      //    触发 update:data 事件改变父组件中绑定的值   
      this.$emit('update:data', this.$props.data + 1)
    }
  }
}
</script>

<template>
  <div id="app">
    <!-- 用 :data.sync 将数据双向绑定到子组件的data属性上 -->  
    <MySon :data.sync="num"></MySon>
  </div>
</template>
​
<script>
import MySon from "@/components/MySon.vue";
export default {
  name: 'App',
  components: {
    MySon
  },
  watch: {
    num(newValue, oldValue) {
      console.log('num: ' + oldValue + ' -> ' + newValue)
    }
  },
  data() {
    return {
      num: 10
    }
  },
}
</script>

<MySon :data.sync="num"></MySon>
          ||
          \/
        等价于
<MySon :data="num" @update:data="(newData) => {num = newData}"></MySon>

<template>
  <div>
    <div>双向数据绑定modelValue：{{props.modelValue}}</div>
    <div><button @click="addModelValue">点击++</button></div>
  </div>
</template>
<script setup>
  //    props.modelValue接收v-model绑定的数据
  const props = defineProps(['modelValue'])
  const emit = defineEmits(['update:modelValue'])
  function addModelValue(){
    //  触发父组件中双向绑定数据的变化
    emit('update:modelValue', props.modelValue + 1)
  }
</script>

<template>
  <Son v-model="num"></Son>
</template>
​
<script setup>
  import {ref, watch} from "vue";
  import Son from "@/components/Son.vue";  
    
  const num = ref(0)
  //    监视num数据变化
  watch(num, (newValue, oldValue) => {
    console.log('num: ' + oldValue + '->' + newValue)
  })
</script>

<template>
  <div>
    <div>双向数据绑定data：{{props.data}}</div>
    <div><button @click="addData">点击++</button></div>
  </div>
</template>
​
<script setup>
  const props = defineProps(['data'])
  const emit = defineEmits(['update:data'])
  const addData = () => {
    emit('update:data', props.data + 1)
  }
</script>

<template>
  <!-- 将num数据绑定到子组件的data属性上 -->
  <Son v-model:data="num"></Son>
</template>
<script setup>
  import {ref, watch} from "vue";
  import Son from "@/components/Son.vue";
  const num = ref(0)
  watch(num, (newValue, oldValue) => {
    console.log('num: ' + oldValue + '->' + newValue)
  })
</script>