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> 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>