Vue2+Ts之Provide / Inject用法

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>