Provide 和 Inject

83 阅读1分钟

ProvideInject 提供和注入,这两个选项是一起用的,祖先组件可以使用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 是字符串数组形式,作用是大范围的 datamethods 等共用