vue3和vue2 之 provide/inject 用法区别 ---vue3组件间通讯2

本文主要是介绍vue3和vue2 之 provide/inject 用法区别 ---vue3组件间通讯2，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、为什么用他们？

 provide/inject 主要用于父组件和子孙组件间通讯，不用在父传子，子传孙，孙传重孙等数据传递了（解决了Prop 逐级传递问题）。简单的父子组件间传值还是使用props、emits或是defineProps、defineEmits、defineExpose比较方便。

二、原理 与 区别

父组件中提供数据，并在其后代的组件树，无论层级有多深，都可以中注入这些数据，从而实现了组件之间的数据传递。。

1. 在vue2中，组件实例方法和属性的继承是通过原型链来实现。

• 当一个组件通过 provide 提供数据，它会将这些数据添加到其原型链上，然后子组件通过 inject 可以在原型链上查找并访问这些数据。
• vue 会遍历父组件链，通过匹配provide（ key，value）和inject（key，default [可选]）的 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值，inject() 将返回 undefined，除非提供了一个默认值。

2. 在 Vue 3 中 组件不再依赖于原型链，而是 引入了 Composition API，直接导出给组件实例。

• provide 是在父组件中使用的选项，它是一个函数，会在父组件实例上创建一个名为 _provided 的对象。_provided 对象存储了提供给子组件的数据，而且这些数据会在整个组件树中可用，子组件可以通过inject选项来访问这些数据。
• 当子组件访问通过inject注入的数据时，Vue 3会在组件树中向上搜索父组件，一旦找到包含提供数据的组件，Vue 3会从该组件的_provided属性中获取相应的数据。
• 如果提供的数据是响应式的，子组件将自动成为这些数据的依赖，当提供的数据发生变化时，子组件将被通知并进行更新。 

三、使用方式

1. vue2中的使用

父组件：

// 1. 
export default{provide:{info:"哈哈哈"}}//2. provide 需要使用 data 内的数据（访问组件实例 property）时，需要将 provide 转换为返回对象的函数。
export default{data() {return {msg: "哈哈哈"};},provide() {return {info: this.msg //提供祖先组件的实例};},
}

后代组件：

// 1. 
export default{inject:['info'],mounted(){console.log("接收数据：", this.info) // 接收数据：哈哈哈}}//2. 或者
<template><div><P>姓名：{{info.msg}}</P></div>
</template><script>
export default {inject: {info: {default: () => ({})}} 
};
</script>

2. vue3中的使用

父组件：

//1. 
<script>
import { provide } from "vue"export default {setup(){provide('info',"哈哈哈")}
}
</script>// 2. 添加响应性
<script setup>import { provide, ref } from 'vue'const location = ref('哈哈哈')function updateLocation() {location.value = '吼吼吼'
}provide('location', {location,updateLocation
})
</script>

后代组件：

// 1. 
<template> {{info}}</template><script>
import { inject } from "vue"export default {setup(){const info = inject('info')return{info}}
} 
</script>//2. 添加响应性后<template><button @click="updateLocation">{{ location }}</button>
</template><script setup>
import { inject } from 'vue'const { location, updateLocation } = inject('location')
</script>

这篇关于vue3和vue2 之 provide/inject 用法区别 ---vue3组件间通讯2的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---