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

chen_sir_sh

已于 2022-11-21 16:46:01 修改

阅读量579

点赞数

CC 4.0 BY-SA版权

分类专栏：面试 vue学习笔记文章标签： vue.js javascript 前端

于 2022-10-25 10:13:04 首次发布

30 篇文章

订阅专栏

10 篇文章

订阅专栏

博客围绕Vue项目中爷孙组件的处理展开。介绍了Vue2中父组件返回自定义函数、子组件用computed处理以实现响应式数据处理；还提到Vue3方法更简洁，直接用ref和reactive方法进行响应式数据处理，可使爷孙组件值实现响应式更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

爷组件：

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

孙组件：

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

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

相比于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");

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