VUE3 子页面向父页面传值

父页面存在多个子页面 父传子直接使用props 不做过多介绍

父定义响应式变量 用来接收子页面传过来的数据

子定义向父页面传值方法

父：

@toSonEvent="changeTitle"

const state = reactive({

title: "",

});

const changeTitle = (fromSonParams: any) => {

//接收子组件传递过来的参数

state.title = fromSonParams;

};

子：

@click="submit"

const fromFather = defineEmits(["toSonEvent"]);

const submit = () => {

fromFather("toSonEvent", '哈哈哈哈哈哈哈哈哈哈');

};

父页面：

<template>

<ProjectInfo :key="timer" @toSonEvent="changeTitle"/>

<ProjectBatchManagement :key="timer" :projectId="state.title"/>

</template>

<script lang="ts" setup>

let timer = ref();

const state = reactive({

title: "",

});

const changeTitle = (fromSonParams: any) => {

//接收子组件传递过来的参数

state.title = fromSonParams;

};

</script>

子页面：

<template>

<el-button @click="submit">向父页面传值</el-button>

</template>

<script lang="ts" setup>

const fromFather = defineEmits(["toSonEvent"]);

const submit = () => {

fromFather("toSonEvent", '哈哈哈哈哈哈哈哈哈哈');

};

</script>