# 读官方文档学技术-Vue3父组件向子组件通讯不要盲目用props

读官方文档学技术-Vue3父组件向子组件通讯不要盲目用props

1. 先下结论:

父组件向子组件传递信息,如果是多层组件嵌套(父>子>孙>孙孙…) ,props逐级透传十分麻烦,props可用但不优雅,更推荐 provide/inject依赖注入的方式;

在**provide/inject依赖注入**中父组件向后代组件通讯,如果说props是传递,逐级透传的,那么依赖注入更准确来说是在父组件中与后代组件共享数据,可实现跨级共享;

2. 原因:

2.1. props逐级透传:

逐级透传,多层组件嵌套的情况,需要一层层传递到目标组件,十分麻烦,虽然大部分情况是点对点传递,但是涉及到多层组件通讯的情况,props用起来就不是那么优雅了

• props父传子适应组件间直接传递的情况:从图中可见,**props逐级透传**是十分麻烦的,需要一层层传递props,在每一层子孙组件中接收props和传递props#### 2.1.1. props逐级透传:组合式API +setup 语法糖代码实例:

//父组件 Root.vue---------------------------------------------------
<template>
  <div>
    <Footer :msg="parentMsg" />
  </div>
</template>
<script setup> import { ref } from 'vue'
import Footer from './Footer.vue' //导入子组件Footer
const parentMsg = ref('父组件信息') </script>
​
//子组件 Footer.vue--------------------------------------------------
<template>
    <DeepChild>
    </DeepChild>
</template>
<script setup> import { toRef, defineProps } from "vue";
import DeepChild from './DeepChild.vue' //导入孙子组件DeepChild 
const props = defineProps(["msg"]);//接收Root父组件传递的信息
console.log(props.msg) //父组件信息 </script>
​
//子孙组件DeepChild.vue---------------------------------------------------
<template>
    <div>
        {{ msg }}
    </div>
</template>
<script setup> import { toRef, defineProps } from "vue";
const props = defineProps(["msg"]);//接收Footer父组件传递的信息
console.log(props.msg) //父组件信息 </script>
​ 

2.2. provide/inject依赖注入 跨级传递:

在**provide/inject依赖注入中父组件向后代组件通讯,如果说props是传递,逐级透传的,那么依赖注入更准确来说是在父组件中与后代组件共享数据,可实现跨级共享**

• provide: 提供> 父组件中注册,传递给后代组件的数据对象* inject: 注入> 后代组件中接收父组件提供的数据对象#### 2.2.1. provide/inject依赖注: 组合式API +setup 语法糖代码实例:

//父组件 Root.vue---------------------------------------------------
<template>
  <div>
    <Footer/>
  </div>
</template>
<script setup> import { ref } from 'vue'
import Footer from './Footer.vue' //导入子组件Footer
//父组件中注册给共享后代组件的信息
provide(/* 注入名 */ 'mgs', /* 值 */ '父组件信息!')  
​ </script>
​
//子组件 Footer.vue--------------------------------------------------
<template>
    <DeepChild/>
</template>
<script setup> import DeepChild from './DeepChild.vue' //导入子组件Footer
//在子组件Footer中可以不需要接收父组件Root共享的数据,在后代组件中,直接接收,实现跨级传递 </script>
​
//子孙组件DeepChild.vue---------------------------------------------------
<template>
    <div>
        {{ msg }}
    </div>
</template>
<script setup> import { inject } from 'vue'
const msg = inject('msg') //跨级接收祖先组件的共享的信息
console.log(msg) //父组件信息 </script> 

通过provide/inject依赖注,父组件与后代组件无论嵌套多深,仅在需要的地方进行依赖注入即可在子孙组件中拿到父组件传递过来的信息,避免了props逐级透传的麻烦且不优雅的方式;

3.扩展-组件通讯的多种形式:

方式	Vue2	Vue3
父传子	props	props
父传子	provide/inject	provide/inject
父传子	$attrs	attrs
父组件访问子组件	$children	无
父组件访问子组件	$ref	expose&ref
子传父	$emit	emits
子传父	$listeners	无(合并到 attrs方式)
子组件访问父组件	$parent	无
兄弟传值	EventBus	mitt

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取