当前位置：首页 > news >正文

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

news 来源：原创 2024/9/21 11:23:06

一、为什么用他们？

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: {from: 'info', // 当声明注入的默认值时，必须使用对象形式，与原注入名同名时，这个属性可选 default: 'default value'}} 
};
</script>

2. vue3中的使用

父组件：

//1. 
<script>
import { provide } from "vue"export default {setup(){provide('info',"哈哈哈");provide('changeSubmitLoading', (val) => {submitLoading.value = val})}
}
</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><template #cell="{ record }"><a-button size="mini" type="text"  @click="handleDelete(record)"></a-button>
</template><script>
import { inject } from "vue"export default {setup(){const info = inject('info')const changeSubmitLoading = inject('changeSubmitLoading')const handleDelete = (record) => {/* 方法内其他内容*/  changeSubmitLoading(true)}return{info}}
} 
</script>//2. 添加响应性后<template><button @click="updateLocation">{{ location }}</button>
</template><script setup>
import { inject } from 'vue'const { location, updateLocation } = inject('location')
</script>