vue中inject ， provide 用法

provide , inject：简单来说就是在父组件 provide 中提供变量，子组件,孙组件 inject 中来注入，
然后可以在子组件，孙组件内部使用 provide 的变量.

• 需要注意的是:这里不论子组件有多深，只要调用了inject那么就可以注入provide中的数据。
• 而不是局限于只能从当前父组件的prop属性来获取数据。

vue3中的一个案例,(非基于setup方法)

• App.vue

<template>
  <div id="app">
    <div>
      <Second />
    </div>
  </div>
</template>
 
<script>
  import Second from './components/Second.vue'
  export default {
    name: 'app',
    components:{//这里不是用setup,必须引入下;否则没法用组件Second
      Second
    },
    provide: {
      test: 'App 根组件的 provide'
    },
    data() {
      return {

      }
    },
    methods: {
      
    }
  }
</script>
 
<style>
</style>

• components/Second.vue

<template>
    <div>
      <p>second page: {{ test }}</p>
      <Third />
    </div>
</template>
 
<script>
  import Third from './Third.vue';
  export default {
    name: 'Second',
    components: {//如果这里不引入会报错:error  'third' is defined but never used  no-unused-vars
      Third
    },
    inject: ['test'],// Second这里不注入,Third也可以注入引用!!!
    data() {
      return {
         
      }
    },
    methods: {
     
    }
  }
</script>
 
<style>
</style>

• component/Third.vue

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

• https://www.cnblogs.com/eleven24/p/10178527.html
• inject 翻译成中文:注射的意思
• 基于setup 参考:https://www.cnblogs.com/pansidong/p/17260767.html