vue3组件传参

父组件向子组件传参

父组件向子组件传参主要通过props来实现

父组件

   
   

import SonComponet from './components/SonComponet.vue';

子组件SonComponet.vue

运行效果

子组件向父组件传参

子组件向父组件传参主要通过defineEmits自定义事件,使用emit触发事件并传递参数。父组件通过监听子组件自定义事件，在事件处理函数中处理传过来的数据。

父组件

 
        
info1:{{ info1 }}
        
info2:{{ info2 }}
        
info3:{{ info3 }}

子组件

运行效果，点击传方法按钮，会调用numIncre方法让数字加1

跨组件传参

Provide / Inject 是 Vue 3 中提供的一种依赖注入机制，允许一个祖先组件向其所有子孙组件注入一个依赖，不论组件层次有多深 。

首先先创建两个组件，ComponentA.vue和ComponentB.vue  在组件A中引入使用组件B

ComponentA.vue

ComponentB.vue

App组件中引入组件A

运行效果，当点击按钮的时候，app组件的文字会被渲染出来。

end

在前端开发中，跨组件传参是常见需求，尤其是在复杂的应用里，不同层级、不同模块的组件之间需要进行数据传递。（如有误欢迎指正）