[Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript(代码片
Posted Answer1215
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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>
以上是关于[Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript(代码片的主要内容,如果未能解决你的问题,请参考以下文章
[Typescript Kaop-ts] Use AOP in Vue Components with TypeScript and Kaop-ts
[Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript