vue3 父组件调用子组件&子组件调用父组件
父组件#
<template>
<div class="home">
父组件年龄:{{age}}
<Test ref="childRef" @parentC="parentC" @response="(msg) => age = age + msg"></Test>
<el-button @click="Child">触发子组件方法 | 修改子组件属性</el-button>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const childRef = ref();
const age = ref(18);
const parentC = (event) => {
alert('父组件的 parentC 方法执行了,参数'+JSON.stringify(event))
}
const Child = () => {
// 触发子组件方法并传参
childRef.value.doSth({
id:2,
name:'曹操'
});
//修改子组件属性
childRef.value.dialogAD = !childRef.value.dialogAD;
}
</script>
子组件#
<template>
<div class="">
<div><el-button @click="parent">调用父组件方法|修改父组件属性</el-button></div>
子组件属性:{{dialogAD}}
</div>
</template>
<script setup lang="ts">
import {defineExpose, ref} from 'vue'
const dialogAD = ref(false);
const doSth = (param) => {
alert('子组件的 doSth 方法执行了!参数:'+JSON.stringify(param))
}
//暴露子组件方法、属性
defineExpose({
doSth,
dialogAD
})
//以下是触发父组件的方法
const emit = defineEmits(['parentC','response'])
const parent = () => {
//修改属性(触发父组件方法)
emit('response',1);
//触发父组件方法
emit('parentC', {
id:1,
name:'刘备'
})
}
</script>
作者:douyuanjun
出处:https://www.cnblogs.com/douyuanjun/p/17111231.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具