vue3+ts中的傳參

1.子組件如何做：

這里以一個對象數組類型的參數為例

（1）子組件中定義要傳過來的參數，該參數要有一個類型約定（interface），這里要導出是因為父組件要用到該接口：

export interface ColumnProps {
  id: number;
  title: string;
  avatar: string;
  description: string;
}

（2）子組件中的props屬性如何定義該傳過來的參數：

props:{
   list: Array as PropType<ColumnPros[]>,
   required:true  
}

import { defineComponent, PropType } from 'vue'

說明：

• 這個props中不能直接使用Array as ColumnProps[]，因為Array是一個數組的構造函數，不是一個類型，所以不能斷言成一個類型
• vue中PropType的用法：
  • 接受一個泛型，可以將一個array的構造函數返回傳入的泛型類型
  • 可以把一個構造函數斷言成一個類型

2.父組件如何調用子組件：

（1）引入子組件及子組件定義的接口(interface)

import ColumnList, { ColumnProps } from './components/ColumnList.vue'

模擬傳給子組件的數據：

const testData: ColumnProps[] = [
  {
    id: 1,
    title: 'test1的專欄',
    description: '這是test1的專欄，有一段非常有意思的簡介，可以更新以下哦',
    avatar:
      'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1827281934,1605450328&fm=15&gp=0.jpg'
  },
  {
    id: 2,
    title: 'test2的專欄',
    description: '這是test2的專欄，有一段非常有意思的簡介，可以更新以下哦',
    avatar:
      'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1827281934,1605450328&fm=15&gp=0.jpg'
  }
]

（2）setup中設置data：

  components: { ColumnList },
  setup () {
    return {
      list: testData
    }
  }

（3）頁面中調用：

<column-list :list="list"></column-list>

 

3.效果：

即可在頁面中出現：