父页面存在多个子页面 父传子直接使用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>