vue provide / inject

最新推荐文章于 2025-05-08 08:42:45 发布

理个以哈呦

最新推荐文章于 2025-05-08 08:42:45 发布

阅读量946

点赞数

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/qq_15253407/article/details/91490210

版权

VUE 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了Vue.js中provide和inject的功能和用法，包括如何在祖先组件中注入依赖，使其在组件树中向下传递，以及如何在子孙组件中接收这些依赖。特别强调了provide和inject的响应式特性，通过实例展示了如何实现在组件间的数据响应式更新。

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

vue 使用 provide，inject。2.2.0 新增

provide / inject 介绍

provide / inject 介绍

1. provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
2. 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

provide 用法

1.选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性

// 传入对象写法
provide: {
    foo: 'bar'
  }
// 函数写法
provide () {
    return {
      s: 'foo'
    }
  }

inject 用法

一个字符串数组，或
一个对象，对象的 key 是本地的绑定名

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

实现 provide / inject 可监听

// App.vue 组件 (父组件)
export default {
        name: 'electron-xdf',
        data () {
            return {
                asideW: '200px',
                _path: null
            };
        },
        created () {
            this._path = this.$route.path;
        },
        provide() {
            return {
                INFO: this // 传递可响应对象
            };
        },
        methods:{
            upprovide(){
                this.asideW = '500px';  // 修改 属性值得变化，可以传递到 子孙后代的任意组件 同时响应变化
            }
        }
    }

// 子组件
export default {
        props: {},
        computed: {},
        name: 'process-communication',
        data () {
            return {
                count: 0
            };
        },
        inject: ['INFO'],
        methods: {
            upprovide(){
                // 这里修改之后 App.vue 也会响应数据的变化
                this.INFO.asideW = '200px';
            }
        }
    };

provide 和 inject 参考地址：https://cn.vuejs.org/v2/api/#provide-inject