Vue2+Ts之Provide / Inject用法
Provide / Inject的定义Provide / Inject: 父级组件向其所有子孙后代注入一个依赖(@Provide ),不论组件层次有多深,都可以通过(@Inject)接收父级组件传过来的任何类型的值,并在其上下游关系成立的时间里始终生效。最近在写项目的时候,常需要对多个子组件的表单进行编辑/查看模式的切换,一开始用Prop进行传值进行控制,当组件多的时候使用Prop还是挺繁琐的,这
·
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>
更多推荐
已为社区贡献7条内容
所有评论(0)