[Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

Vue 2.2 introduced a simple dependency injection system, allowing you to use provide and inject in your component options. This lesson shows you how to use them using the @Inject and @Provide decorators in tandem!

 

When you want to provide some service or data from parent to child component you can use @Provide and @Inject.

 

Parent component:

<template>
  <div class="hello">
    <ChildComp :msg="'What a good day!'"/>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import {Component, Provide} from 'vue-property-decorator'

import ChildComp from './Child.vue';

@Component({
})
export default class Hello extends Vue {

  @Provide('users')
  users = [
    {
      name: 'test',
      id: 0
    }
  ]

}
</script>

 

Child:

<template>
  <div>
      {{users}}
  </div>
</template>

<script lang="ts">

import Vue from 'vue'
import {Component, Inject} from 'vue-property-decorator'

@Component({})
export default class Child extends Vue {
    message: string = "Hello";

    @Inject('users') users;
}
</script>

 

转载于:https://www.cnblogs.com/Answer1215/p/7522484.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值