[Vue+TS]UseDependencyInjectioninVueUsing@Injectand@ProvideDecoratorswithTypeScri ...

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

@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>