Vue3的v-model实现子传父

使用v-model进行父传子的元素，v-model自带了子传父事件："update : 属性名"，通过触发该事件进行子传父，则不再需要去父组件再创建一个事件

父组件：

<template>
  <Child2 v-model:name="obj.name" v-model:age="obj.age"></Child2>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
import Child2 from "./components/Child2.vue";

let obj = reactive({
  name: "张三",
  age: 20,
});
</script>
<style lang="less" scoped></style>

 子组件：

<template>
  <div>子组件2----{{ name }}------{{ age }}</div>
  <div><button @click="changeName">修改name按钮</button></div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";

defineProps<{
  name: string;
  age: number;
}>();

const emit = defineEmits<{
  (event: "update:name", name: string): void;
}>();

const changeName = () => {
  emit("update:name", "李四");
};
</script>