vue3 父组件调用子组件&子组件调用父组件

截屏2023-01-05 20.21.39.png

父组件#

<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 国际」许可协议进行许可。

posted @   窦戈  阅读(1641)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
menu
点击右上角即可分享
微信分享提示