vue中provide和inject的用法

provide#inject

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

inject应该是：

• 一个字符串数组或
• 一个对象，对象的 key 是本地的绑定名，value 是：
  • 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
  • 一个对象，该对象的：
    • from属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
    • default属性是降级情况下使用的 value

以上是来自Vue官方文档的原话，总的来说这个组合提供了始先组件给其所有子孙后代注入一个依赖的能力。不论组件层次有多深，始终在上下关系中生效。

• 示例：

<template>
  <div id="app">
	<router-view />
  </div>
</template>
<script>
export default {
  data() {},
  provide() {
    return {
      eventBus: this.eventBus,
    }
  }
}
</script>

以上是vue的入口文件App.vue，App.vue是vue的根组件在根组件中注入的方法可以当作全局方法使用。

<template>
</template>
<script>
expert default{
	inject: ['eventBus'],
	mounted() {
	  this.eventBus.$on('removeIsCollapse ', () => {
	    this.isCollapse = false
	  })
	  this.eventBus.$on('showIsCollapse ', () => {
	    this.isCollapse  = true
	  })
	},
}
</script>
<style>
</style>

以上是自定义的sideBar组件，sideBar组件常见的逻辑就是折叠，在以上组件中，我们通过inject获取了App.vue提供的eventBus对象
然后在mounted中给组件注入了removeIsCollapse和showIsCollapse方法。

<template>
</template>
<script>
expert default{
	inject: ['eventBus'],
	mounted() {
	  this.clientHeight = document.body.clientHeight
	  if(this.clientHeight<700){
		this.eventBus.$emit('showIsCollapse ')  
	  }else{
		this.eventBus.$emit('removeIsCollapse ')
	  }
	},
}
</script>
<style>
</style>

以上是在其他组件中调用了sideBar组件中注入的removeIsCollapse和showIsCollapse方法。此时就会触发slideBar中注册的方法使得isCollapse状态发生改变。