Vue2中Provide和Inject和Vue3中Provide和Inject爷孙组件传值响应式使用方法

使用方法"/>

Vue2中Provide和Inject和Vue3中Provide和Inject爷孙组件传值响应式使用方法

在vue项目开发时，如果遇到爷孙组件时，应该如何快速处理呢？

vue2中使用方法：

爷组件：

data() {return {name: "卷儿"}
},
provide: function() {return {newName: () => this.name}
}

孙组件：

inject: ['newName'],
computed: {hnewName() {return this.newName()}
}

父组件返回一个自定义的函数,子组件进行computed来进行处理，来实现响应式数据处理。

vue3的使用方法：

相比于vue2，vue3方法更简洁，直接使用ref 和 reactive方法，来进行响应式数据处理。

爷组件：

import { reactive,provide,ref } from 'vue';
provide('location', ref('北极'))
provide('geolocation', reactive({longitude: 90,latitude: 135
}))

孙组件：

import { inject} from 'vue';
const geolocation = inject("geolocation");
const location = inject("location");

这样爷孙组件无论任何一个组件内的值发生改变，两个组件的值都会进行响应式的数据更新。