学一个知识点,我们得知道这个知识点是用来干嘛的?为什么选择用它?怎么用?

provide/inject的作用

vue官网原话【允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,
并在其上下游关系成立的时间里始终生效。】也就是如果当前组件设置了provide传递数据,
那么在当前组件的所有后辈组件中,都可以使用inject接收这个数据。

provide/inject被选择的理由

组件通信的方式那么多,多代传递数据的通信方式还有vuex,$root,全局事件总线。为什
么选择provide/inject呢?
1. 如果当前项目只是一个小项目,项目中用不到太多的多代组件通信,那引入vuex就使得
项目的体积变大。
2. 使用全局事件总线或者$root,多人协同开发时,标识容易起冲突。

provide/inject使用方式

provide:Object | () => Object
inject:Array<string> | { [key: string]: string | Symbol | Object }
provide:应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 数据。在
该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 
和 Reflect.ownKeys 的环境下可工作。
inejct:可以是字符串数组或者一个对象。接收到的值会被vue直接添加到当前组件实例对
象身上。

App.vue

<template>
  <div>
    <Son></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue";
export default {
  name: "App",
  components: {
    Son,
  },
  // provide: {
  //   obj: { a: 1, b: 2 },
  // },
  provide() {
    // 通过this可以拿到当前组件,可以在此做一些业务
    console.log(this);
    return {
      obj: { a: 1, b: 2 },
    };
  },
};
</script>

<style>
</style>


Son.vue

<template>
  <div>Son
    <GrandSon></GrandSon>
  </div>
</template>

<script>
import GrandSon from "./GrandSon.vue"
export default {
  name: "web-son",
  components: {
    GrandSon
  }
};
</script>

<style scoped>
</style>

GrandSon.vue

<template>
  <div>grandson</div>
</template>

<script>
export default {
  name: "web-grandson",
  // inject: ["obj"],
  inject: {
    // 起别名
    grandSonObj: "obj",
  },
  mounted() {
    console.log(this);
    // console.log(this.obj);
    console.log(this.grandSonObj);
  },
};
</script>

<style scoped>
</style>

在这里插入图片描述

注意事项

非响应式的

提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一
个可监听的对象,那么其对象的属性还是可响应的。意味着vue底层没有打破引用数据类
型的引用关系,修改引用数据类型的属性可以实现响应式。
在vue3版本中,已经变成响应式的了。

Vue 2.2.1版本之后变化的特性

Vue 2.2.1版本之前,inject接收的值会在 props 和 data 初始化之后加载。但是在
Vue 2.2.1版本之后,inject接收的值会在props和data初始化之前了,那么我们可以
在data和props中拿到我们inject接收的值啦!

初始化data

const Child = {
  inject: ['foo'],
  data () {
    return {
      bar: this.foo
    }
  }
}

为props设置默认值

const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default () {
        return this.foo
      }
    }
  }
}

Vue 2.5.0版本之后添加的特性

可以为inject设置默认值啦。当inject在祖先的provide中找不到该属性时,当给予了默认
值,便不再报错了。此时inject的值为默认值
const Child = {
  inject: {
  	/* 去接收祖辈provide中的foo数据,并在当前组件身上添加一个foo属性,
  	 如果没有在祖辈中找到foo数据,那么当前组件身上foo属性的属性值为"foo" */    
  	 foo: { default: 'foo' }
  }
}
const Child = {
  inject: {
  /* 去接收祖辈provide中的bar数据,并在当前组件身上添加一个foo属性,
  	 如果没有在祖辈中找到foo数据,那么当前组件身上foo属性的属性值为"foo" */
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}
const Child = {
  inject: {
  /* 去接收祖辈provide中的bar数据,并在当前组件身上添加一个foo属性,
  	 如果没有在祖辈中找到foo数据,那么当前组件身上foo属性的属性值为[1, 2, 3] */
   foo: {
      from: 'bar',
      default: () => {
          // 注意this指向为undefined
          console.log(this);
          return [1, 2, 3]
      }
    }
  }
}

当前组件的祖辈有多个provide

依然是可以正常全部接收的,关键是provide中的属性名不要冲突。如果冲突的话就会
inject接收到离当前组件关系最近的祖辈provide中的值。

App.vue

<template>
  <div>
    <Son></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue";
export default {
  name: "App",
  components: {
    Son,
  },
  // provide: {
  //   obj: { a: 1, b: 2 },
  // },
  provide() {
    // 通过this可以拿到当前组件,可以在此做一些业务
    console.log(this);
    return {
      obj: { a: 1, b: 2 },
    };
  },
};
</script>

<style>
</style>

Son.vue

<template>
  <div>
    Son
    <GrandSon></GrandSon>
  </div>
</template>

<script>
import GrandSon from "./GrandSon.vue";
export default {
  name: "web-son",
  components: {
    GrandSon,
  },
  provide: {
    obj: { c: 3, d: 4 },
  },
};
</script>

<style scoped>
</style>

GrandSon.vue

<template>
  <div>grandson</div>
</template>

<script>
export default {
  name: "web-grandson",
  // inject: ["obj"],
  inject: {
    // 起别名
    grandSonObj: "obj",
  },
  mounted() {
    console.log(this);
    // console.log(this.obj);
    console.log(this.grandSonObj);
  },
};
</script>

<style scoped>
</style>

在这里插入图片描述

当属性值没有重复时,可以正常接收。

App.vue

<template>
  <div>
    <Son></Son>
  </div>
</template>

<script>
import Son from "./components/Son.vue";
export default {
  name: "App",
  components: {
    Son,
  },
  // provide: {
  //   obj: { a: 1, b: 2 },
  // },
  provide() {
    // 通过this可以拿到当前组件,可以在此做一些业务
    console.log(this);
    return {
      obj: { a: 1, b: 2 },
    };
  },
};
</script>

<style>
</style>

Son.vue

<template>
  <div>
    Son
    <GrandSon></GrandSon>
  </div>
</template>

<script>
import GrandSon from "./GrandSon.vue";
export default {
  name: "web-son",
  components: {
    GrandSon,
  },
  provide: {
    obj2: { c: 3, d: 4 },
  },
};
</script>

<style scoped>
</style>

GrandSon.vue

<template>
  <div>grandson</div>
</template>

<script>
export default {
  name: "web-grandson",
  // inject: ["obj"],
  inject: {
    // 起别名
    grandSonObj: "obj",
    obj2: "obj2",
  },
  mounted() {
    console.log(this);
    // console.log(this.obj);
    console.log(this.grandSonObj);
    console.log(this.obj2);
  },
};
</script>

<style scoped>
</style>

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐