vue3父子组件双向绑定

vue3父子组件双向绑定方式（优雅），直接淦代码，注释在代码中

父组件

<template>
  <input type="text" v-model="msg">
  <hr>
  // vue3已经弃用.sync  双向绑定使用v-modal
  <HelloWorld v-model:msg="msg" />
</template>

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import { reactive, ref } from "vue"

const msg = ref('111')

</script>

子组件

<template>
    <div>{{ value }}</div>
    <input type="text" v-model="value">
</template>

<script setup lang="ts">
import { computed, defineEmits } from "vue"

// 接受父组件传递过来的参数msg
const props = defineProps(['msg'])
// 定义子传父事件， update可默认执行父组件数据更新，父组件不需要调用此方法
const emit = defineEmits(['update:msg'])
// 计算属性接受父组件传递过来的msg， 设置get、set方法实现数据双向绑定
const value = computed({
    get: () => props.msg,
    set: (val) => emit('update:msg', val)
})

</script>

加油兄弟们，冲冲冲