vue 中的 provide 和 inject 用法
阿新 • • 發佈:2020-12-20
provider/inject:簡單來說就是在父元件 provide 中提供變數,子元件 inject 中來注入,然後可以在子元件內部使用 provide 的變數
需要注意的是這裡不論子元件有多深,只要呼叫了inject那麼就可以注入provider中的資料。而不是侷限於只能從當前父元件的prop屬性來獲取資料。
App.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<template>
<div id= "app" >
<div>
<second/>
</div>
</div>
</template>
<script>
import second from './components/Second'
export default {
name: 'app' ,
components: {
second
},
provide: {
test: 'App 根元件的 provide'
},
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
|
Second.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<template>
<div>
<p>second: {{ test }}</p>
<third/>
</div>
</template>
<script>
import third from './Third.vue' ;
export default {
name: 'second' ,
components: {
third
},
inject: [ 'test' ],
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
|
Third.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template>
<div>
<p>third: {{ test }}</p>
</div>
</template>
<script>
export default {
name: 'third' ,
components: {},
inject: [ 'test' ],
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
|