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>