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>
posted @ 2022-07-11 17:13  盘思动  阅读(106)  评论(2)  编辑  收藏  举报