vue3 setup 语法糖父子通信

子组件

//子组件 A
<script lang="ts" setup="">
const props = defineProps<{
    text: string;
}>();

// 默认值写法
const propsDefault = withDefaults(
    defineProps<{
        text:string,
    }>(),
    {
        text: '我是父组件传入的值',
    },
);
//调用父组件的方法
const emit = defineEmits<{
    (e: 'update', value:string): void;
}>();
//使用update:value 在父组件可以用 v-model:value
//使用update:input 在父组件可以用 v-model:input
</script>

<template>
     <p>{{text}}</p>
     <button @click="emit('update','abc');">修改</button>
</template>

父组件

//父组件 B
<script lang="ts" setup="">
import A from "A"

import {ref} from 'vue'
const text= ref<string>('abc')

function update(val:string){
    text.value=val
}
</script>

<template>
     <A :text='text' @update="update"/>
</template>