provide/inject

最新推荐文章于 2024-08-15 10:34:54 发布

前端一枚

最新推荐文章于 2024-08-15 10:34:54 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签： vue provide/inject

本文链接：https://blog.csdn.net/u011200562/article/details/108949585

版权

本文介绍了Vue的provide/inject特性，用于在组件间进行跨级数据传递。无论组件层级多深，子组件都可以通过inject接收来自父组件provide的数据。虽然provide/inject的绑定本身不具有响应性，但提供的对象属性仍然是响应式的。文章还讨论了如何实现provide/inject的监听以及如何通过此方法刷新Vue组件。

摘要由CSDN通过智能技术生成

概述

provide/inject：简单的来说就是在父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provide中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

写法

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

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

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

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

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