如何用Typescript写Vue组件

Toast

首先我们做需求分析：

难点

1. 动态生成Vue实例

第一个难点在于：我们需要动态生成Vue实例，作为弹窗，这就需要用到插件的知识

另外，由于我用的是Typescript, 还需要额外指定类型

首先我们准备一个Toast.vue

<template>
    <div class="toast">
        <slot></slot>
    </div>
</template>

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

  @Component
  export default class Toast extends Vue {

  }
</script>

然后我们新建一个plugin.ts, 注意以下的代码就可以生成一个vue实例，并且把生成的元素插入到body里去

plugin.ts

import _Vue from "vue";
import Toast from '../components/Toast.vue';

export default new (class toastPlugin