Vue2+Ts之Provide / Inject用法

最新推荐文章于 2025-10-09 22:43:20 发布

原创最新推荐文章于 2025-10-09 22:43:20 发布 · 3.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #typescript

Vue3 + TypeScript 专栏收录该内容

23 篇文章

订阅专栏

在Vue.js项目中，当需要在父组件和多个深层子组件之间传递数据时，使用Prop可能会变得复杂。此时，可以利用Vue的Provide/Inject特性简化这一过程。在提供的例子中，父组件通过@Provide传递一个包含name、age和isCheckd的对象，子组件则通过@Inject接收并显示这些数据。通过点击按钮，父组件可以改变isCheckd的值，实时更新在子组件中的展示。这种方式提高了代码的可维护性和效率。

Provide / Inject的定义

Provide / Inject： 父级组件向其所有子孙后代注入一个依赖（@Provide ），不论组件层次有多深，都可以通过（@Inject）接收父级组件传过来的任何类型的值，并在其上下游关系成立的时间里始终生效。

最近在写项目的时候，常需要对多个子组件的表单进行编辑/查看模式的切换，一开始用Prop进行传值进行控制，当组件多的时候使用Prop还是挺繁琐的，这样的话，使用 Provide / Inject就可以快速实现功能的切换

父组件

<template>
  <div>
  <!-- 引用子组件 ProvideInject -->
    <ProvideInject />
    <a-button type="primary" @click="isCheckdBtn()">isCheckd</a-button>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Provide, Vue, Watch } from 'vue-property-decorator';
import ProvideInject from './components/ProvideInject.vue';

@Component({
  components: { ProvideInject },
})
export default class ProvideIndex extends Vue {
  @Provide('provideObject')//定义@Provide将provideObject对象传给子组件
  provideObject: { name: string; age: number; isCheckd: boolean } = { name: 'Provide', age: 100, isCheckd: false };

  isCheckdBtn() {
    this.provideObject.isCheckd = true;
  }
}
</script>

子组件

<template>
  <div>
    <h1>我是子组件--{{ provideObject }}</h1>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Inject, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class ProvideInject extends Vue {
  @Inject() provideObject: { name: string; age: number; isCheckd: boolean };// 定义@Inject()对父组件传过来的值进行接收
}
</script>

在这里插入图片描述