第九節：零散匯總1(defineComponent作用、InstanceType獲取組件對象、json轉換ts、代理配置、globalProperties全局屬性、{ ...item } 拷貝、template中用別名 )

一. 零散知識匯總

1. defineComponent作用

 　類型推導  和 類型限制 的作用

 

2. 如何綁定一個組件對象(ts寫法)？

　以PageModel組件為例，使用 InstanceType<typeof PageModal>來獲取組件類型，最后用ref來包裹。

<template>
    <page-modal ref="pageModalRef"></page-modal>
</template>
<script lang="ts">
    import { defineComponent, ref } from 'vue';
    import PageModal from '@/components/page-modal/src/page-modal.vue';
    export default defineComponent({
        components: {
            PageModal,
        },
        setup() {
            const pageModalRef = ref<InstanceType<typeof PageModal>>(); return {
                pageModalRef,
            };
        },
    });
</script>

3.  json轉換成ts類或接口

　利用工具網站：http://www.json2ts.com/ 

(1). json代碼：

{ 
"programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" },
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
] }

(2). 轉換后ts接口、類

declare module namespace {
    export interface Programmer {
        firstName: string;
        lastName: string;
        email: string;
    }
    export interface Author {
        firstName: string;
        lastName: string;
        genre: string;
    }
    export interface Musician {
        firstName: string;
        lastName: string;
        instrument: string;
    }
    export interface RootObject {
        programmers: Programmer[];
        authors: Author[];
        musicians: Musician[];
    }
}

 

4.  代理的配置

　默認開發環境下是不支持跨域請求的，所有要配置代理。 

(1). vue.config.js

 　　在devServer配置proxy屬性，如下代碼，表示凡是以 /api 開頭的請求地址，都會改為以 http://47.92.156.224:5000，比如：請求地址的 url= /api/Login/CheckLogin , 則轉換為 url=http://47.92.156.224:5000/Login/CheckLogin

    devServer: {
        proxy: {
            '^/api': {
                target: 'http://47.92.156.224:5000',
                pathRewrite: {
                    '^/api': '',
                },
                changeOrigin: true,
            },
        },
        port: 8080,
        open: false,
    },

(2). 請求接口的配置

　以axios為例，通常的套路為參數baseUrl設置為 /api （這里的/api也不是直接寫死哦，而是寫在配置文件中，即開發環境下才是/api），則下面的請求為直接寫后面的地址即可。　 　

A. 設置BaseUrl

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

B. 配置不同環境下的BaseUrl值

.env.development

# base api
VUE_APP_BASE_API = '/api'

.env.production

# base api
VUE_APP_BASE_API = 'http://xxx生產環境地址'

C. 實際請求

export const getArticleList = data => {
  return request({
    url: '/article/list',
    params: data
  })
}

 

5. globalProperties全局屬性的使用

(1). 在main.ts中聲明全局屬性。下面$filters就是全局屬性

app.config.globalProperties.$filters = {
        // 1.時間轉換
        formatTime(val: string) {
            return formatUtcString(val);
        },
};

(2). 配置相應的類型(js的不需要配置)

setup中使用需要在當前頁面或者main.ts中配置

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $filters: any;
    }
}

<template>中使用需要在xx.d.ts中配置

declare let $filters: any;

(3). setup中使用

  import { getCurrentInstance } from 'vue';
  const { proxy } = getCurrentInstance();
  console.log(proxy.$filters.formatTime('2021-08-20T04:07:23.000Z'));

(4). template中使用

<span style="margin-left: 5px">{{ $filters.formatTime(scope.row.createAt) }}</span>

 

6.  { ...item } 的用法

(1). 用法說明-淺拷貝

　下面表示把pageInfo對象淺拷貝了一份給obj1對象，則： obj1={ pageSize : 10, pageIndex : 1 }

let pageInfo = {
     　　 pageSize: 10,
         pageIndex: 1,
};
let obj1 = { ...pageInfo };

(2). 補充1個語法糖 -簡化寫法

 　下面的obj2，obj3，obj4的結果都是  { pageSize：20 }

            let pageSize = 20;
            let obj2 = { pageSize: pageSize };
            let obj3 = { pageSize: 20 };
        // 下面是簡化寫法 let obj4 = { pageSize };

(3). 自動合並 

 　下面obj5和obj6都是合並后的結果

            let pageInfo = {
                pageSize: 10,
                pageIndex: 1,
            };    
　　　　　　　let pageIndex = 2;
            let obj5 = { ...pageInfo, pageSize: 50 }; //{pageSize:50,pageIndex:1}
            let obj6 = { ...pageInfo, pageIndex }; //{pageSize:10,pageIndex:2}

 

7. template中使用別名 

 　需要加個 ~ 符號 

 <img class="img" src="~@/assets/img/logo.svg" />

 

 

 

 

 

 

 

 

 

 

 

!

• 作       者 : Yaopengfei(姚鵬飛)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 聲     明1 : 如有錯誤，歡迎討論，請勿謾罵^_^。
• 聲     明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址，否則保留追究法律責任的權利。