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
等共用