浅析Vue3中通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定

// 父组件
<template>
    <div> 数量： {{num}}</div>
    <!-- <ChildComponent :num="num" @increase="num = $event"/> -->
    <ChildComponent :num.sync="num" />
</template>

//子组件
<template>
    <div @click="addNum"> 接收数量： {{num}}</div>
</template>
<script>
export default {
    props: ['num'],
    // data() {
    //    return {
    //        childNum: this.num
    //    }
    // },
    methods: {
        addNum() {
            // this. childNum++
            // this.$emit('increase', this. childNum)
            this.$emit('update:num', this.num + 1)
        }
    }
}

// 父组件
// v-model 没有指定参数名时，子组件默认参数名是modelValue
<ChildComp v-model="search" />

<template>
  <div>
    <input v-model="sea" @input="valChange(sea)" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
  name: 'ChildComp',
  props: {
    modelValue: { // 父组件 v-model 没有指定参数名，则默认是 modelValue
      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    // input初始化
    const sea = ref(props.modelValue)
    // 如果父组件传过来的数据是异步获取的，则需要进行监听
    watch(() => props.modelValue, () => { sea.value = props.modelValue })
    // 数据双向绑定
    function valChange (e: string) {
      emit('update:modelValue', e)
    }
    return {
      sea,
      valChange
    }
  }
})
</script>

// 父组件
<ChildComp v-model="search" v-model:address="addr" />

// 子组件对应为
props: {
　　modelValue: { // 父组件 v-model 没有指定参数名，则默认是 modelValue
　　　　type: String,
　　　　default: ''
　　},
　　address: {  // 父组件 v-model 有指定参数名，则是指定参数名
　　　　type: String,
　　　　default: ''
　　}
},

// input初始化
const sea = ref(props.modelValue)
const add = ref(props.address)
 
// 如果父组件传过来的数据是异步获取的，需要进行监听
watch(() => props.modelValue, () => { sea.value = props.modelValue })
watch(() => props.address, () => { add.value = props.address })
 
// 数据双向绑定
emit('update:modelValue', e)
emit('update:address', e)

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:modelValue'])
const show = computed({
  get() {
    return props.modelValue
  },
  set(v) {
    emit('update:modelValue', v)
  }
})