Provide 和 Inject

Provide、Inject 提供和注入，这两个选项是一起用的，祖先组件可以使用Provide给子孙组件提供自身的属性和方法，不论子孙组件的层级有多深；子孙组件可以通过 Inject 获取到祖先组件的属性和方法

GrandFather.vue

<template>
  <div id="app">
    <Father>
    </Father>
  </div>
</template>

<script>
import Father from "./components/Father.vue"

export default {
  provide:{
    name:"爷爷"
  },
  components:{Father}
};
</script>
复制代码

Father.vue

<template>
  <Child></Child>
</template>

<script>
import Child from "../components/Child.vue"
export default {
  components:{Child}
};
</script>
复制代码

Child.vue

<template>
  <div>{{name}}</div> 
</template>

<script>
export default {
  inject:["name"]
};
</script>
复制代码

效果：

可以看出 Provide 是对象形式而 Inject 是字符串数组形式，作用是大范围的 data 和 methods 等共用