vue3父子组件双向传值

使用背景：

在vue项目中，无论是vue3还是vue2，当父组件向子组件传值时，子组件收到props后的值都是只读（readonly）的，但我们有一种情况，当子组件中的props数值在经过与用户的互动后需要再传给父组件，此时就需要使用到父子组件的双向传值。

使用方法：

要实现的目标如下（父子组件的选择框需要状态联动，既同时更改点击的状态，子组件选上时父组件也被选上；父组件选上时，子组件也被选上）：

同时没被选上

同时选上

子组件B.vue写法（子组件在与用户互动后改变传来的checkVal值，定义一个emit向父组件传值，名字需要为 update:checkVal(这里的变量名字为props传来的名字)，在互动时向父组件发送新的值即可实现双向的通信）

<template>
  <input type="checkbox" :checked="checkVal" @input="closeHander" />
</template>
<script lang="ts" setup>
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  checkVal: {
    type: Boolean,
    default: false,
  },
});

let emit = defineEmits(["update:checkVal"]);
const closeHander = () => {
  emit("update:checkVal", !props.checkVal);
};
</script>

父组件A.vue写法（父组件传值（:checked="checkVal"）期待的效果是子组件能更改这里的checkVal）

<template>
  <div>
    <div>子组件的选择框</div>
    <B v-model:checkVal="checkVal"></B>
    <hr>
    <div>父组件的选择框</div>
    <input type="checkbox" :checked="checkVal" @input="hanlder" />
  </div>
</template>

<script lang="ts" setup>
    import { ref } from "vue";
    import B from "./B.vue";
    let checkVal = ref(false);
    const hanlder = () => {
      checkVal.value = !checkVal.value;
    };
</script>