【Vue3】vue3+TS 元件匯出
阿新 • • 發佈:2020-11-27
vue3+TS 元件匯出
-
vue3.0+
-
TypeScript
- vue2.0中常用方法,不推薦
- 配合shims-vue.d.ts進行元件定義和註冊
【注意】:匯入元件時需加上‘.vue’字尾
import LaMenu from "@/components/Menu.vue"; - 目前vue-class-component不支援vue3.0組合API寫法,不建議使用
// vue3.0+TypeScript使用時的一些小坑 // 【三種定義方式在Vue3.*+Ts】 /*******************************************************************/ // 【1.直接匯出】 export default{ name: 'myComponent' } /*******************************************************************/ /*******************************************************************/ // 【2.使用defineComponent匯出】 import {defineComponent} from 'vue' export default defineComponent({ name: 'myComponent' }) /*******************************************************************/ /*******************************************************************/ // 【3.使用vue-class-component】 import Vue from 'vue' import Options from 'vue-class-component' // Define the component in class-style // 最新版Component註解已經改為Options @Options({ computed: mapGetters([ 'posts' ]), methods: mapActions([ 'fetchPosts' ]) }) export default class Counter extends Vue { property: number; method(){} } /*******************************************************************/