1. 程式人生 > 實用技巧 >vue 中的 provide 和 inject 用法

vue 中的 provide 和 inject 用法

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> importsecond from'./components/Second' exportdefault{ 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> importthird from'./Third.vue'; exportdefault{ 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> exportdefault{ name:'third', components: {}, inject: ['test'], data() { return{ } }, methods: { } } </script> <style> </style>