vue3 setup 语法糖父子通信

原创已于 2024-07-10 16:52:39 修改 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2024-07-10 16:48:47 首次发布

子组件

//子组件 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>