1. 程式人生 > 實用技巧 >【Vue3】vue3+TS 元件匯出

【Vue3】vue3+TS 元件匯出

vue3+TS 元件匯出

  • vue3.0+

  • TypeScript

    1. vue2.0中常用方法,不推薦
    2. 配合shims-vue.d.ts進行元件定義和註冊
      【注意】:匯入元件時需加上‘.vue’字尾
      import LaMenu from "@/components/Menu.vue";
    3. 目前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(){}
    }
    /*******************************************************************/