提供与注入
通常，当咱们须要将数据从父组件传递到子组件时，咱们应用 props。设想一下这样的构造：你有一些深嵌套的组件，而你只须要来自深嵌套子组件中父组件的某些内容。在这种状况下，你依然须要将 prop 传递到整个组件链中，这可能会很烦人。
对于这种状况，咱们能够应用 provide 和 inject 对。父组件能够作为其所有子组件的依赖项提供程序，而不论组件层次结构有多深。这个个性有两个局部：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始应用这个数据。
Provide/inject scheme
例如，如果咱们有这样的层次结构：
`Root
└─ TemplateM
├─ TestCom
`
如果咱们的子组件须要调用父组件的办法，咱们就能够应用 provide/inject 将父组件的 Vue 实例对象传递进去：
`<template>
<div class=”template-m-wrap”>
<test-com :title=”lastName”></test-com>
</div>
</template>
<script>
import TestCom from ‘./TestCom’
export default {
name: “TemplateM”,
components: {
TestCom
},
provide: {
parent: “this”
},
data() {
return {
firstName: ‘dsdsdd’,
lastName: ‘Ken’
};
},
methods: {
submit(options) {
console.log(options)
}
},
};
</script>
`
而后在子组件注入父组件的 parent 属性：
`<template>
<div class=”test-com-wrap”>
{{title}}
<button @click=”click”> 按钮 </button>
</div>
</template>
<script>
export default {
name: “TestCom”,
props: {
title: {
type: String,
default: “”,
},
},
inject: [‘parent’],
emits: [‘click-event’],
created() {
console.log(this.$attrs)
},
methods: {
click(e) {
console.log(this.parent)
this.$emit(‘click-event’, e)
}
}
};
</script>
`
查看浏览成果如下：
然而，如果咱们尝试在此处提供一些组件实例 property，则这将不起作用：
“provide: {
todoLength: this.todos.length // 将会导致谬误 ‘Cannot read property ‘length’ of undefined`
},
“
要拜访组件实例 property，咱们须要将 provide 转换为返回对象的函数，接下来咱们将父组件的实例传递到子组件中，这样咱们就能在子组件拜访到父组件的属性了：
`<template>
<div class=”template-m-wrap”>
<test-com :title=”lastName”></test-com>
</div>
</template>
<script>
import TestCom from “./TestCom”;
export default {
name: “TemplateM”,
components: {
TestCom,
},
provide() {
return {parent: this};
},
data() {
return {
firstName: “dsdsdd”,
lastName: “Ken”,
};
},
methods: {
submit(options) {
console.log(options);
},
},
};
</script>
`
在子组件中应用 parent:
`<template>
<div class=”test-com-wrap”>
{{title}}
<button @click=”click”> 按钮 </button>
</div>
</template>
<script>
export default {
name: “TestCom”,
props: {
title: {
type: String,
default: “”,
},
},
inject: [‘parent’],
emits: [‘click-event’],
created() {
console.log(this.$attrs)
},
methods: {
click(e) {
console.log(this.parent)
this.$emit(‘click-event’, e)
}
}
};
</script>
`
查看浏览成果如下：
这使咱们可能更平安地持续开发该组件，而不用放心可能会更改 / 删除子组件所依赖的某些内容。这些组件之间的接口依然是明确定义的，就像 prop 一样。
实际上，你能够将依赖注入看作是“long range props”，除了：
- 父组件不须要晓得哪些子组件应用它提供的 property
- 子组件不须要晓得
injectproperty 来自哪里