Vue3 父子组件通信

子级调用父级方法

父级

<template>
  <div>
    <div>父级页面</div>
    <hello @click="click"></hello>
  </div>
</template>

<script setup lang="ts">
import hello from "@/components/hello.vue";

let click = () => {
  console.log("我是父组件方法");
};
</script>

子级

<template>
  <div @click="getClick">子级组件</div>
</template>

<script setup lang="ts">
const emit = defineEmits(["click"]);
let getClick = () => {
  emit("click");
};
</script>

效果图

父级调用子级方法

1，第一种方法
父级

<template>
  <div>
    <div>父级页面</div>
    <hello ref="helloRef" @getClick="getClick"></hello>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import hello from "@/components/hello.vue";

const helloRef = ref();

let getClick = (val?: any) => {
  console.log(val);
};
</script>

子级

<template>
  <div @click="getClick">子级组件</div>
</template>

<script setup lang="ts">
const emit = defineEmits();
let getClick = () => {
  emit("getClick", "我是子组件方法");
};
</script>

2，第二种方法。通过 defineExpose 暴露
父级

<template>
  <div>
    <div @click="click">父级页面</div>
    <hello ref="helloRef" @click="click"></hello>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import hello from "@/components/hello.vue";

const helloRef = ref();

let click = () => {
  helloRef.value.getClick();
};
</script>

子级

<template>
  <div @click="getClick">子级组件</div>
</template>

<script setup lang="ts">
let getClick = () => {
  console.log("我是子组件方法");
};
defineExpose({ getClick });
</script>

效果图