超详细的 | vue3组件之间的通信方式（一）(父传子、子传父)一篇文章让你彻底搞懂如何传值

一、父组件向子组件传值(props)

1.废话不多说直接上代码

父组件：FatherTest.vue

<template>
  <div class="box">
    <h1>props:我是父组件曹操</h1>
    <Child info="我是曹操" :money="money"></Child>
  </div>
</template>
 
<script setup lang="ts">
//导入子组件 props:可以实现父子组件通信,props数据还是只读的
import Child from "./Child.vue";
import { ref } from "vue";
//定义数据
let money = ref(8888);
</script>复制

子组件：Child.vue

<template>
  <div class="son">
       <h1>我是子组件:曹丕</h1>
       <p>{{props.info}}</p>
       <p>{{props.money}}</p>
  </div>
</template>
 
<script setup lang="ts">
//注意：
//1.需要使用到defineProps方法去接受父组件传递过来的数据
//2.defineProps是Vue3提供方法,不需要引入直接使用
let props = defineProps(['info','money']); //数组|对象写法都可以
 
</script>复制

 在 Vue 3 中，我们使用 <script setup> 语法糖，这让组件定义更加简洁。ref 用于定义响应式数据。defineProps：是 Vue 3 中的一个函数，用于定义组件的 props，使用 defineProps函数定义的 props 是只读的响应式对象，它们的值由父组件传递而来，不能被子组件修改。

二、子组件向父组件传值(自定义事件)

子组件通过 emit 函数可以实现了子组件向父组件传值的功能

父组件：FatherTest.vue

<template>
  <div>
    <!--
        vue2框架当中:@click这种写法自定义事件,可以通过.native修饰符变为原生DOM事件
        vue3框架下面写法其实即为原生DOM事件
 
        vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件
      -->
    <!-- 绑定自定义事件child-event:实现子组件给父组件传递数据 -->
    <Child  @child-event="handler3" @click="handler4"></Child>
  </div>
</template>
 
<script setup lang="ts">
//引入子组件
import Child from './Child.vue';
 
//事件回调---4
const handler3 = (param1,param2)=>{
    console.log(param1,param2);
}
//事件回调--5
const handler4 = (param1,param2)=>{
     console.log(param1,param2);
}
</script>复制

子组件：Child.vue

<template>  
  <div class="child">  
    <p>我是子组件2</p>  
    <button @click="handler">点击我触发自定义事件child-event</button>  
    <button @click="emitClick">点击我触发自定义事件click</button>  
  </div>  
</template>  
  
<script setup>  
// 使用 defineEmits 声明可以触发的自定义事件  
const emit = defineEmits(['child-event', 'click']);  
  
// 按钮点击回调，触发 child-event  
const handler = () => {  
  emit('child-event', '参数1', '参数2');  
};  
  
// 另一个按钮点击回调，触发 click 事件  
const emitClick = () => {  
  emit('click', '小猫', '小狗');  
};  
</script>复制

defineEmits 是 Vue 3 Composition API 中的一个函数，用于在组件中明确地声明该组件可以触发的自定义事件。父组件通过 @child-event 监听子组件发出的事件，并在事件发生时执行 handler3方法。 

子传父 补充说明：defineExpose也可以实现子组件向父组件传递数据

defineExpose 是 Vue 3 的 Composition API 中一个新的实用函数，用于在 <script setup> 语法下显式暴露组件的公共属性和方法

这在处理子组件时特别有用，允许父组件访问子组件的特定属性或方法

在 Vue 3 中，当我们使用 <script setup> 语法糖时，组件默认不会自动暴露内部的任何状态或方法给外部使用，为了显式暴露某些属性或方法，可以使用 defineExpose

子组件

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="childEvent">childEvent</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
const count = ref(0);
 
const childEvent=()=> {
  count.value++;
}
 
// 使用 defineExpose 来暴露 count的值 和 childEvent方法
defineExpose({
  count,
  childEvent,
});
</script>复制

父组件

<template>
  <div>
    <Child ref="childRef" />
    <button @click="accessChild">Child</button>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import Child from './Child.vue';
 
const childRef = ref(null);
 
const accessChild =()=> {
  if (childRef.value) {
    console.log('Current count:', childRef.value.count);  /// 打印出来为子组件count的值0
    childRef.value.childEvent(); 可以触发子组件childEvent方法 实现子组件count++
  }
}
 
</script>复制

• defineExpose 用于在 <script setup> 中显式暴露组件内部状态、属性和方法；
• 父组件可以通过 ref 访问子组件实例并调用暴露的属性和方法