vue中的provide/inject的學習使用
阿新 • • 發佈：2018-05-25
vue temp cin scrip adding 調用 div plain cell
irst：定義一個parent component
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template>
<div>
<childOne></childOne>
</div>
</template>
<script>
import childOne from ‘../components/test/ChildOne‘
export default {
name: "Parent",
provide: {
for: "demo" },
components:{
childOne
}
}
|
在這裏我們在父組件中provide for這個變量。
second 定義一個子組件
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template>
<div>
{{demo}}
<childtwo></childtwo>
</div>
</template>
<script>
import childtwo from ‘./ChildTwo‘
export default {
name: "childOne",
inject: [‘for‘],
data() {
return {
demo: this.for
}
},
components: {
childtwo
}
}
</script>
|
third 定義另一個子組件
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template>
<div>
{{demo}}
</div>
</template><script>
export default {
name: "",
inject: [‘for‘],
data() {
return {
demo: this.for
}
}
}
</script>
|
在2個子組件中我們使用jnject註入了provide提供的變量for，並將它提供給了data屬性。
這裏官網註明例子只工作在 Vue 2.2.1 或更高版本。低於這個版本時，註入的值會在 props 和 data 初始化之後得到。
運行之後看下結果
從上面這個例子可以看出，只要在父組件中調用了，那麽在這個父組件生效的生命周期內，所有的子組件都可以調用inject來註入父組件中的值。
vue中的provide/inject的學習使用