provide/inject

最新推荐文章于 2025-10-25 18:47:17 发布

原创最新推荐文章于 2025-10-25 18:47:17 发布 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#provide/inject #vue

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨Vue.js中provide/inject的使用方法，解析如何在组件间传递数据，包括基本用法、监听数据变化及刷新组件技巧。适用于Vue开发者理解和掌握高级组件通信方式。

概述

provide/inject：简单的来说就是在父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。

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

写法

// 传入对象写法
provide: {
    foo: 'bar'
}
// 函数写法
provide () {
    return {
      foo: 'bar'
    }
}

实例

祖孙传参例子：

//Parent：
<template>
 <div>
<childOne></childOne>
 </div>
</template>
 
<script>
 import childOne from '../components/test/ChildOne'
 export default {
  name: "Parent",
  provide: {
   for: "demo"
  },
  components:{
   childOne
  }
 }

//ChildOne：
<template>
 <div>
  {{demo}}
  <childtwo></childtwo>
 </div>
</template>
 
<script>
 import childtwo from './ChildTwo'
 export default {
  name: "childOne",
  inject: ['for'],
  data() {
   return {
    demo: this.for
   }
  },
  components: {
   childtwo
  }
 }
</script>

//ChildTwo：
<template>
 <div>
  {{demo}}
 </div>
</template>
 
<script>
 export default {
  name: "",
  inject: ['for'],
  data() {
   return {
    demo: this.for
   }
  }
 }
</script>

在这里插入图片描述

实现 provide / inject 可监听

// App.vue 组件 (父组件)
export default {
        name: 'electron-xdf',
        data () {
            return {
                asideW: '200px',
                _path: null
            };
        },
        created () {
            this._path = this.$route.path;
        },
        provide() {
            return {
                INFO: this // 传递可响应对象
            };
        },
        methods:{
            upprovide(){
                this.asideW = '500px';  // 修改 属性值得变化，可以传递到 子孙后代的任意组件 同时响应变化
            }
        }
    }

// 子组件
export default {
        props: {},
        computed: {},
        name: 'process-communication',
        data () {
            return {
                count: 0
            };
        },
        inject: ['INFO'],
        methods: {
            upprovide(){
                // 这里修改之后 App.vue 也会响应数据的变化
                this.INFO.asideW = '200px';
            }
        }
    };

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

刷新vue组件

// App.vue 组件 (父组件)
<template>
  <div
    id="app"
  >
    <router-view
      v-if="isRouterAlive"
    />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    MergeTipDialog,
    BreakNetTip
  },
  data () {
    return {
      isShow: false,
      isRouterAlive: true
  },

// 父组件中返回要传给下级的数据
  provide () {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

// 子组件
<template>
  <popup-assign
    :id="id"
    @success="successHandle"
  >
    <div class="confirm-d-tit"><span class="gray-small-btn">{{ name }}</span></div>
    <strong>将被分配给</strong>
    <a
      slot="reference"
      class="unite-btn"
    >
      指派
    </a>
  </popup-assign>
</template>
<script>
import PopupAssign from '../PopupAssign'
export default {
//引用vue reload方法
  inject: ['reload'],
  components: {
    PopupAssign
  },
methods: {
    // ...mapActions(['freshList']),
    async successHandle () {
      this.reload()
    }
  }
}
</script>

这样就实现了子组件调取reload方法就实现了刷新vue组件的功能,个人认为它实现了组件跨越组件传递数据方法。

参考：
https://www.jb51.net/article/139769.htm
https://blog.youkuaiyun.com/qq_15253407/article/details/91490210
https://www.jianshu.com/p/d34a7df4cd6a