在vue3中，父子组件通信与vue2不同，没有this，所以不能直接使用this.$emit 和this.$refs和Props。那么在vue3中我们要怎么通信呢？

（补充：这里我们使用的是<script setup>，<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 <script> 语法，它具有更多优势。单文件组件 <script setup> | Vue.js）

接下来先看官方怎么使用Props和Emits 单文件组件 <script setup> | Vue.js：

注意：在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits 并可以直接可用。

下面是使用示例：

1. props

<template>
  <HelloWorld
    msg="Hello 我是父组件中的props传递的值"
  />
</template>

<script setup>
import { ref } from "vue";

let props = defineProps({
  msg: { type: String },
}); //声明 props
console.log("我是子组件接收的props值："+props.msg);
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

2.ref （父传子---父组件调用有两种方法获取)

        1.通过ref获取

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import { ref, onMounted, nextTick } from "vue";
const parentComponent = ref();

onMounted(() => {
  nextTick(() => {
   parentComponent.value.childMethod("我是父组件，调用子组件中的方法"); //调用子组件的方法
  });
});
</script>

<template>
  <HelloWorld
    msg="Hello 我是props传递的值"
    ref="parentComponent"
  />
</template>

        2.通过getCurrentInstance组件上下文对象

import HelloWorld from "./components/HelloWorld.vue";
import { onMounted, nextTick, getCurrentInstance } from "vue";
 
const poxy = getCurrentInstance(); //获取组件上下文对象 

onMounted(() => {
  nextTick(() => {
    poxy.refs.parentComponent.childMethod("调用子组件中的方法");
  });
});
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <p>{{ count }}</p>
  <p>{{ emitvalue }}</p>
  <HelloWorld
    msg="Hello 我是props传递的值"
    @change="change"
    ref="parentComponent"
  />
</template>

         子组件

<script setup>
// 父组件调用子组件方法-子组件
const childMethod = (val) => {
  console.log(val);
};
// 重点！！这里需要使用defineExpose暴露出去
defineExpose({
  childMethod,
});
</script>

这里需要注意的是，如果要获取到子组件，必须要用defineExpose将组件暴露出去，否则获取不到。

 3.emit（子传父）

<script setup>

// 子组件调用父组件
const emit = defineEmits(["change"]); //声明 emits
emit("change", "我是子组件传入的值"); //触发事件

</script>

 

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import { ref } from "vue";
// const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。
const emitvalue = ref("0"); 
function change(val) {
  console.log("emit的使用");
  emitvalue.value = val;
  console.log(emitvalue.value);
}

</script>

<template>
  <p>{{ emitvalue }}</p>
  <HelloWorld
    msg="Hello 我是props传递的值"
    @change="change"
  />
</template>

这里有个小知识点，也是遇到用const定义的时候才思考发现的：const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。

参考阮一峰参考