vue 中的 provide 和 inject 用法

 

provider/inject：簡單來說就是在父組件 provide 中提供變量，子組件 inject 中來注入，然后可以在子組件內部使用 provide 的變量

需要注意的是這里不論子組件有多深，只要調用了inject那么就可以注入provider中的數據。而不是局限於只能從當前父組件的prop屬性來獲取數據。

 

App.vue

<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

<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

<template>
    <div>
      <p>third: {{ test }}</p>
    </div>
</template>

<script>
  export default {
    name: 'third',
    components: {},
    inject: ['test'],
    data() {
      return {
        
      }
    },
    methods: {
    
    }
  }
</script>

<style>
</style>