在 Vue 3 中如何实现父子组件之间的通信？

一、一般情况父子组件方法调用及传参（defineProps, defineEmits）

<!-- Parent.vue -->
<template>
  <div>
    <Child :message="message" @update:message="handleUpdateMessage" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import Child from "./Child.vue";

const message = ref("Hello, world!");

function handleUpdateMessage(newMessage) {
  message.value = newMessage;
}
</script>

<!-- Child.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">Update Message</button>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  message: String,
});

const emits = defineEmits(["update:message"]);

function handleClick() {
  emits("update:message", "New message");
}

export default {
  props,
  emits,
  handleClick,
};
</script>

二、使用ref方式直接调用子组件方法

<!-- Parent.vue -->
<template>
  <div>
    <Child ref="Child" :message="message" @update:message="handleUpdateMessage" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import Child from "./Child.vue";

const message = ref("Hello, world!");
const Child = ref(null)

function handleUpdateMessage(newMessage) {
  message.value = newMessage;
}

function handleChild() {
 Child.value.testfun()
 console.log("调用子组件");
}
</script>

<!-- Child.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">Update Message</button>
  </div>
</template>

<script lang="ts" setup>
import { defineProps,defineExpose } from "vue";

const props = defineProps({
  message: String,
});

const emits = defineEmits(["update:message"]);

function handleClick() {
  emits("update:message", "New message");
}
function testfun() {
  console.log("子组件被调用了");
}
defineExpose({
    testfun,
  });
</script>