用vue3+ts實現全局Header和列表數據渲染ColumnList

• 🖼?序言
• 📻一、ColumnList數據渲染
• • 1、設計稿搶先知
  • 2、數據構思
  • 3、視圖數據綁定
  • 4、數據傳遞
  • 5、撓頭情況
• ??二、GlobalHeader全局Header
• • 1、設計稿搶先看
  • 2、數據構思
  • 3、視圖數據綁定
  • 4、數據傳遞
• 📸三、Dropdown下拉菜單
• • 1、組件基本功能
  • 2、自定義菜單內容DropdownItem
  • 3、組件點擊外部區域自動隱藏
  • 4、自定義函數
  • 5、聯合效果
• 🛒四、結束語
• 🐣彩蛋 One More Thing
• • 基礎知識回顧
  • 軟件推薦
  • 番外篇

🖼?序言

最近在用 vue3 和 ts 搗鼓一些小工具，發現平常開發中一個很常見的需求就是，數據列表的渲染?，F在重新學習，發現我在學 vue2 時的很多設計規范和邏輯都考慮的不是特別妥當。

因此，寫下這篇文章，記錄組件設計中數據列表渲染和全局頭部的設計。

一起來學習吧~🙆

📻一、ColumnList數據渲染

1、設計稿搶先知

在了解功能實現之前，我們先來看看原型圖，看我們想要實現的數據列表是怎么樣的。如下圖所示：

大家可以先了解一下，我們待會所要實現內容的效果圖。

2、數據構思

了解完具體的效果圖之后呢，現在我們要開始來干活啦！

首先我們需要先構思這個組件所需要的數據有哪一些呢？

這個組件所需要的數據，首先是每一行數據它自己唯一的 id ，其次就是標題 title ，還有一個是頭像 avatar ，最后一個是每個標題對應的文字描述 description 。

分析完成之后，我們現在在 vue3 項目下的 src|components 文件夾下新建一個文件，命名為 ColumnList.vue 。之后再編寫這段業務代碼。具體代碼如下：

<template><div></div> </template><script lang="ts"> import { computed, defineComponent, PropType } from 'vue' //用ts寫一個接口，存放列表數據的屬性 export interface ColumnProps {id: number;title: string;avatar?: string;description: string; } export default defineComponent({name: 'ColumnList',props: {//將接口的內容賦值給list數組，方便接收父組件傳來的數據list: {type: Array as PropType<ColumnProps[]>,required: true}} }) </script> <style lang="scss" scoped></style>

3、視圖數據綁定

現在，對數據構思完畢之后，我們是還沒有取到任何數據可以渲染的，相當于是一個空的 ColumnList 。但是我們已經有了接口的屬性內容，所以我們先來把數據綁定到視圖當中。具體代碼如下：

<template><div class="row"><div v-for="column in columnList" :key="column.id" class="col-4 mb-3"><div class="card h-100 shadow-sm"><div class="card-body text-center"><img :src="column.avatar" :alt="column.title" class="rounded-circle border border-light w-25 my-3"><h5 class="title">{{column.title}}</h5><p class="card-text text-left">{{column.description}}</p><a href="#" class="btn btn-outline-primary">進入專欄</a></div></div></div></div> </template><script lang="ts"> import { computed, defineComponent, PropType } from 'vue' export interface ColumnProps {id: number;title: string;avatar?: string;description: string; } export default defineComponent({name: 'ColumnList',props: {list: {type: Array as PropType<ColumnProps[]>,required: true}} }) </script> <style lang="scss" scoped></style>

注： 這里我用到的是 bootstrap 的樣式庫，所以 css 方面不做過多的編寫，大家有需要可以到官方中文文檔進行查看，也可以自己進行樣式設計。

到此，我們就完成了第一輪的數據綁定。接下來我們在父組件中，進行數據傳遞。

4、數據傳遞

我們在vue3項目中的 src 文件夾下的 App.vue 中來進行數據傳遞。具體代碼如下：

<template><div class="container"><column-list :list="list"></column-list></div> </template><script lang="ts"> import { defineComponent } from 'vue' //在根文件下引入bootstrap import 'bootstrap/dist/css/bootstrap.min.css' //引入子組件 import ColumnList, { ColumnProps } from './components/ColumnList.vue'//制造子組件的接口數據 const testData: ColumnProps[] = [{id: 1,title: 'test1專欄',description: '眾所周知， js 是一門弱類型語言，并且規范較少。這就很容易導致在項目上線之前我們很難發現到它的錯誤，等到項目一上線，渾然不覺地，bug就UpUp了。于是，在過去的這兩年，ts悄悄的崛起了。 本專欄將介紹關于ts的一些學習記錄。'avatar: 'https://img0.baidu.com/it/u=3101694723,748884042&fm=26&fmt=auto&gp=0.jpg'},{id: 2,title: 'test2專欄',description: '眾所周知， js 是一門弱類型語言，并且規范較少。這就很容易導致在項目上線之前我們很難發現到它的錯誤，等到項目一上線，渾然不覺地，bug就UpUp了。于是，在過去的這兩年，ts悄悄的崛起了。 本專欄將介紹關于ts的一些學習記錄。',avatar: 'https://img0.baidu.com/it/u=3101694723,748884042&fm=26&fmt=auto&gp=0.jpg'} ]export default defineComponent({name: 'App',components: {ColumnList},setup () {return {list: testData}} }) </script><style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>

現在，我們來看下此時瀏覽器的運行效果：

大家可以看到，通過以上的代碼編寫，數據正常的傳遞并運行成功了。

5、撓頭情況

看到這里，感覺整個組件的設計還挺盡善盡美的。但是呢，大家有沒有想過有一種特殊情況，假設后端傳來的數據中，有一行數據里面，沒有頭像avatar的值。那這個時候，如果我們前期沒有考慮清楚有可能遇到的各種情況，程序估計很容易地就報錯了。

所以我們還要做的一件事情就是，當收不到頭像的數據時，我們要給它加一張初始化的圖片，以至于保持列表內容一致。

現在我們來對 ColumnList.vue 文件進行改造，具體代碼如下：

<template><div class="row"><div v-for="column in columnList" :key="column.id" class="col-4 mb-3"><div class="card h-100 shadow-sm"><div class="card-body text-center"><img :src="column.avatar" :alt="column.title" class="rounded-circle border border-light w-25 my-3"><h5 class="title">{{column.title}}</h5><p class="card-text text-left">{{column.description}}</p><a href="#" class="btn btn-outline-primary">進入專欄</a></div></div></div></div> </template><script lang="ts"> import { computed, defineComponent, PropType } from 'vue' //用ts寫一個接口，存放列表數據的屬性 export interface ColumnProps {id: number;title: string;avatar?: string;description: string; } export default defineComponent({name: 'ColumnList',props: {//將接口的內容賦值給list數組，方便接收父組件傳來的數據list: {type: Array as PropType<ColumnProps[]>,required: true}},//將props傳遞給setupsetup(props) {const columnList = computed(() => {//遍歷list數組數據的每一行return props.list.map(column => {//當遇到當前行數據沒有頭像時if (!column.avatar) {//賦予初始化圖片column.avatar = require('@/assets/logo.png')}return column})})return {columnList}} }) </script><style lang="scss" scoped></style>

繼續，我們把 App.vue 中 testData 的數據進行刪減。具體代碼如下：

<template><div class="container"><column-list :list="list"></column-list></div> </template><script lang="ts">//制造子組件的接口數據 const testData: ColumnProps[] = [{id: 1,title: 'test1專欄',description: '眾所周知， js 是一門弱類型語言，并且規范較少。這就很容易導致在項目上線之前我們很難發現到它的錯誤，等到項目一上線，渾然不覺地，bug就UpUp了。于是，在過去的這兩年，ts悄悄的崛起了。 本專欄將介紹關于ts的一些學習記錄。'//avatar: 'https://img0.baidu.com/it/u=3101694723,748884042&fm=26&fmt=auto&gp=0.jpg'},{id: 2,title: 'test2專欄',description: '眾所周知， js 是一門弱類型語言，并且規范較少。這就很容易導致在項目上線之前我們很難發現到它的錯誤，等到項目一上線，渾然不覺地，bug就UpUp了。于是，在過去的這兩年，ts悄悄的崛起了。 本專欄將介紹關于ts的一些學習記錄。',avatar: 'https://img0.baidu.com/it/u=3101694723,748884042&fm=26&fmt=auto&gp=0.jpg'} ]

大家定位到 testData 中的 avatar 那一行，我們把第一個數據的 avatar 屬性進行注釋。現在，我們來看下瀏覽器的效果：

大家可以看到，缺 avatar 屬性時，按照我們預期的，瀏覽器自動顯示了我們預先初始化的圖片。這樣，不論從組件結構設計還是從代碼邏輯結構設計來說，是不是感覺可擴展性又增強了許多。

??二、GlobalHeader全局Header

1、設計稿搶先看

寫完 columnList 組件，我們用一個新的組件來強化這種設計方法。接下來我們來寫一個新的組件，GlobalHeader ，即全局頭部。先來看下我們要實現的效果圖。詳情見下圖：

2、數據構思

了解完具體的效果圖之后呢，同樣地，我們先來構思這個組件所需要的數據有哪一些。

這個組件所需要的數據，首先是針對每一個用戶的，所以它每個用戶擁有自己唯一的 id ，其次就是用戶名 name ，最后一個是 是否登錄 isLogin 。

分析完成之后，我們現在在 vue3 項目下的 src|components 文件夾下新建一個文件，命名為 GlobalHeader.vue 。之后編寫這段業務代碼。具體代碼如下：

<template><div></div> </template><script lang="ts"> import { defineComponent, PropType } from 'vue'//用ts寫一個接口，存放列表數據的屬性 //name和id加？表示是可選項 export interface UserProps{isLogin: boolean;name?: string;id?: number; } export default defineComponent({name: 'GlobalHeader',props: {//將接口的內容賦值給user對象，方便接收父組件傳來的數據user: {type: Object as PropType<UserProps>,required: true}} }) </script> <style lang="scss" scoped></style>

3、視圖數據綁定

現在，對數據構思完畢之后，我們來把數據綁定到視圖當中。具體代碼如下：

<template><nav class="navbar navbar-dark bg-primary justify-content-between mb-4 px-4"><a class="navbar-brand" href="#">周一專欄</a><ul v-if="!user.isLogin" class="list-inline mb-0"><li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2">登錄</a></li><li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2">注冊</a></li></ul><ul v-else class="list-inline mb-0"><li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2">歡迎你 {{user.name}}</a></li></ul></nav> </template><script lang="ts"> import { computed, defineComponent, PropType } from 'vue' export interface ColumnProps {id: number;title: string;avatar?: string;description: string; } export default defineComponent({name: 'ColumnList',props: {list: {type: Array as PropType<ColumnProps[]>,required: true}} }) </script> <style lang="scss" scoped></style>

4、數據傳遞

現在，我們在 vue3 項目中的 src 文件夾下的 App.vue 中來進行數據傳遞。具體代碼如下：

<template><div class="container"><global-header :user="user"></global-header></div> </template><script lang="ts"> import { defineComponent } from 'vue' //在根文件下引入bootstrap import 'bootstrap/dist/css/bootstrap.min.css' //引入子組件 import GlobalHeader, { UserProps } from './components/GlobalHeader.vue'//制造子組件的接口數據 const currentUser: UserProps = {isLogin: false,name: 'Monday' }export default defineComponent({name: 'App',components: {GlobalHeader},setup () {return {user: currentUser}} }) </script><style lang="scss" scoped></style>

當前 isLogin 的狀態我們是設置成 false ?，F在，我們來看下此時瀏覽器的運行效果：

大家可以看到，當前狀態為 false ，所以 header 的右邊顯示的是登錄和注冊兩個按鈕，如預期所料。

現在，我們來把 isLogin 的狀態改為 true ，具體代碼如下：

const currentUser: UserProps = {isLogin: true,name: 'Monday' }

此時我們來看下瀏覽器的顯示效果，如下圖所示：

現在，可以看到，當 isLogin 為 true 時，表示用戶成功登錄了。所以 header 的右方顯示的是 歡迎你 Monday 的字樣，也如我們預期所料。

📸三、Dropdown下拉菜單

看完上面的內容，大家心里是否有一個疑惑，我們 header 最右方的下拉菜單還沒有實現。不著急，接下來我們就來設計這個組件。

1、組件基本功能

我們現在先來設計下這個組件的基本功能。首先在 vue3 項目的 src|components 文件夾下，新增一個 .vue 文件，命名為 Dropdown.vue 。之后編寫該文件的代碼，具體代碼如下：

<template><div class="dropdown"><!-- 下拉菜單標題 --><a href="#" class="btn btn-outline-light my-2dropdown-toggle" @click.prevent="toggleOpen()">{{title}}</a><!-- 下拉菜單內容 --><ul class="dropdown-menu" :style="{ display: 'block' }" v-if="isOpen"><li class="dropdown-item"><a href="#">新建文章</a></li><li class="dropdown-item"><a href="#">編輯資料</a></li></ul></div> </template><script lang="ts"> import { defineComponent, ref, onMounted, onUnmounted, watch } from 'vue'export default defineComponent({name: 'Dropdown',props: {title: {type: String,required: true}},setup() {const isOpen = ref(false)//點擊后打開菜單const toggleOpen = () => {isOpen.value = !isOpen.value}return {isOpen,toggleOpen}} }) </script><style lang="scss" scoped></style>

---

繼續，我們來改造下剛剛的 GlobalHeader.vue 文件。具體代碼如下：

<template><nav class="navbar navbar-dark bg-primary justify-content-between mb-4 px-4"><a class="navbar-brand" href="#">周一專欄</a><ul v-if="!user.isLogin" class="list-inline mb-0"><li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2">登錄</a></li><li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2">注冊</a></li></ul><ul v-else class="list-inline mb-0"><li class="list-inline-item"><dropdown :title="`歡迎你 ${user.name}`"></dropdown></li></ul></nav> </template><script lang="ts"> import { defineComponent, PropType } from 'vue' import Dropdown from './Dropdown.vue'export interface UserProps{isLogin: boolean;name?: string;id?: number; } export default defineComponent({name: 'GlobalHeader',components: {Dropdown},props: {user: {type: Object as PropType<UserProps>,required: true}} }) </script><style lang="scss" scoped></style>

現在，我們來看下瀏覽器的顯示效果：

2、自定義菜單內容DropdownItem

現在，我們已經完成了組件的基本功能。但是細心的小伙伴已經發現，下拉菜單沒有辦法自定義，因為它被寫成固定的了。還有一個問題就是，點擊其他區域我們不能收起菜單，這間接地，用戶體驗好像就沒有那么好了。所以呢，有需求了，我們就來完成需求?，F在，我們就來解決上述所說的兩個問題。

同樣地，在vue3項目中的 src|components 文件夾下添加一個 .vue 文件，命名為 DropdownItem.vue 。具體代碼如下：

<template><liclass="dropdown-option":class="{'is-disabled': disabled}"><!-- 定義一個插槽，供給父組件使用 --><slot></slot></li> </template><script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({props: {//禁用狀態屬性disabled: {type: Boolean,default: false}} }) </script><style> /* 注意：*表示兩個類下面的所有元素 */ .dropdown-option.is-disabled * {color: #6c757d;/* 不讓其點擊，將pointer-events設置為none */pointer-events: none;background: transparent; } </style>

接下來我們來將之前寫死的內容進行該打造，大家定位到 Dropdown.vue 文件，具體代碼如下：

<template><div class="dropdown"><!-- 下拉菜單標題 --><a href="#" class="btn btn-outline-light my-2dropdown-toggle" @click.prevent="toggleOpen()">{{title}}</a><!-- 下拉菜單內容 --><ul v-if="isOpen" class="dropdown-menu" :style="{ display: 'block' }"><slot></slot></ul></div> </template><script lang="ts"> import { defineComponent, ref } from 'vue'export default defineComponent({name: 'Dropdown',props: {title: {type: String,required: true}},setup() {const isOpen = ref(false)//點擊后打開菜單const toggleOpen = () => {isOpen.value = !isOpen.value}return {isOpen,toggleOpen}} }) </script><style lang="scss" scoped></style>

通過以上代碼我們可以了解到，將插槽放到 dropdown-menu 中去。

---

現在，到了最后一步，我們來看把它引入 GlobalHeader.vue 文件中。具體代碼如下：

<template><nav class="navbar navbar-dark bg-primary justify-content-between mb-4 px-4"><a class="navbar-brand" href="#">周一專欄</a><ul v-if="!user.isLogin" class="list-inline mb-0"><li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2">登錄</a></li><li class="list-inline-item"><a href="#" class="btn btn-outline-light my-2">注冊</a></li></ul><ul v-else class="list-inline mb-0"><li class="list-inline-item"><dropdown :title="`歡迎你 ${user.name}`"><drop-down-item><a href="#" class="dropdown-item">新建文章</a></drop-down-item><drop-down-item disabled><a href="#" class="dropdown-item">編輯資料</a></drop-down-item><drop-down-item><a href="#" class="dropdown-item">退出登陸</a></drop-down-item></dropdown></li></ul></nav> </template><script lang="ts"> import { defineComponent, PropType } from 'vue' import Dropdown from './Dropdown.vue' import DropDownItem from './DropDownItem.vue'export interface UserProps{isLogin: boolean;name?: string;id?: number; } export default defineComponent({name: 'GlobalHeader',components: {Dropdown,DropDownItem},props: {user: {type: Object as PropType<UserProps>,required: true}} }) </script><style lang="scss" scoped></style>

此時，我們來看下瀏覽器的顯示效果：

大家可以看到，此時的編輯資料已經變成了灰色并且無法進行點擊和跳轉。同時，自定義菜單的內容也一一顯示了出來。

到這里，這一步的內容我們就完成啦！接下來我們繼續升華這個組件，讓它的用戶體驗更為極致。

3、組件點擊外部區域自動隱藏

大家可以聯想到平常自己點擊各大網站時的場景，當點擊菜單外部區域時，組件是不是就會自動隱藏。所以，接下來我們就來實現這個功能。

首先我們要明確，需要完成的兩個任務：

• 在 onMounted 時候添加 click 事件，在 onUnmounted 的時候將事件刪除；
• 拿到 Dropdown 的 DOM 元素，從而判斷點擊的內容是否被這個元素包含。

接下來我們定位到 Dropdown.vue 文件，繼續升級改造。具體代碼如下：

<template><div class="dropdown" ref="dropdownRef"><a href="#" class="btn btn-outline-light my-2 dropdown-toggle" @click.prevent="toggleOpen()">{{title}}</a><ul v-if="isOpen" class="dropdown-menu" :style="{ display: 'block' }"><slot></slot></ul></div> </template><script lang="ts"> import { defineComponent, ref, onMounted, onUnmounted, watch } from 'vue'export default defineComponent({name: 'DropDown',props: {title: {type: String,required: true}},setup() {const isOpen = ref(false)// 獲取ref的dow節點const dropdownRef = ref<null | HTMLElement>(null)const toggleOpen = () => {isOpen.value = !isOpen.value}const handler = (e: MouseEvent) => {if (dropdownRef.value) {// 用contains來判斷是否包含另外一個dow節點// 當點擊的不是當前區域的節點，并且菜單是打開的if (!dropdownRef.value.contains(e.target as HTMLElement) && isOpen.value) {isOpen.value = false}}}onMounted(() => {document.addEventListener('click', handler)})onUnmounted(() => {document.removeEventListener('click', handler)})return {isOpen,toggleOpen,dropdownRef,handler}} }) </script><style lang="scss" scoped></style>

此時我們來看下瀏覽器的顯示效果：

大家可以看到，改造完 dropdown 的邏輯后，如我們預期所料的，當我們點擊組件外部區域時，組件也自動隱藏了。

4、自定義函數

到這里，整個 GlobalHeader 組件可以說是相對比較完美了。但是大家有沒有發現，在設計 dropdown 組件時，dropdown.vue 的代碼好像看起來還稍微有一點點冗余。

這個時候我們可以考慮把它的邏輯抽離出來，單獨放到一個自定義函數里面。接下來一起來實現一下吧~

首先我們在 vue3 項目中的 src 文件夾下，新建一個文件夾，命名為 hooks 。之后在 hooks 下新建一個文件，命名為 useClickOutside.ts 。 useClickOutside 的具體代碼如下：

import { ref, onMounted, onUnmounted, Ref } from "vue";const useClickOutside = (elementRef: Ref<null | HTMLElement>) => {const isClickOutside = ref(false)const handler = (e: MouseEvent) => {if (elementRef.value){if(elementRef.value.contains(e.target as HTMLElement)){isClickOutside.value = true }else{isClickOutside.value = false}}}onMounted( () => {document.addEventListener('click', handler)})onUnmounted(() => {document.removeEventListener('click', handler)})return isClickOutside }export default useClickOutside

---

抽離完代碼后，我們繼續把 Dropdown.vue 化繁為簡。具體代碼如下：

<template><div class="dropdown" ref="dropdownRef"><a href="#" class="btn btn-outline-light my-2 dropdown-toggle" @click.prevent="toggleOpen()">{{title}}</a><ul v-if="isOpen" class="dropdown-menu" :style="{ display: 'block' }"><slot></slot></ul></div> </template><script lang="ts"> import { defineComponent, ref, onMounted, onUnmounted, watch } from 'vue' import useClickOutside from '../hooks/useClickOutside'export default defineComponent({name: 'DropDown',props: {title: {type: String,required: true}},setup() {const isOpen = ref(false)// 獲取ref的dow節點const dropdownRef = ref<null | HTMLElement>(null)const toggleOpen = () => {isOpen.value = !isOpen.value}const isClickOutside = useClickOutside(dropdownRef)if (isOpen.value && isClickOutside) {isOpen.value = false}watch(isClickOutside, () => {if (isOpen.value && isClickOutside.value) {isOpen.value = false}})return {isOpen,toggleOpen,dropdownRef}} }) </script><style lang="ts" scoped></style>

此時瀏覽器的顯示效果如下：

大家可以看到，最終的顯示效果也是一樣的。但是呢，通過代碼邏輯抽離，我們整個組件的設計看起來也更加完美，可擴展性也變得更高。

5、聯合效果

最后，我們把上面所學的GlobalHeader和Columnist結合起來，來看一下一體化的效果。詳情見下圖：

以上就是關于 ColumnList 和 GlobalHeader 兩個組件的實現方式。不知道大家是否還意猶未盡呢~

后面還會持續出關于組件設計的文章，歡迎關注~

🛒四、結束語

講到這里，關于組件 GlobalHeader 和 ColumnList 的設計就結束啦！在設計組件的時候呢，要特別考慮組件的可擴展性。如果一個組件在寫的時候，感覺沒什么復用度，那么這個時候可能就得思考下，是不是哪個環節出現問題了。多問自己為什么，多問自己這個組件是否能抽離的更好。

以上就是本文的全部內容！如有疑問或文章有誤歡迎評論區留言或公眾號后臺加我微信交流~

🐣彩蛋 One More Thing

基礎知識回顧

• vuejs基礎知識
• ts基礎知識

軟件推薦

這里給大家推薦文章用到的一個畫圖軟件：Axure RP 9

Axure RP 旨在用于畫低保真原型圖，對于開發者來說也是極其友好的。豐富的控件庫和動畫交互，可以滿足日常畫圖的大部分需求。安利一波~

番外篇

• 關注公眾號星期一研究室，第一時間關注學習干貨，更多精選專欄待你解鎖~

• 如果這篇文章對你有用，記得留下腳印再走哦~

• 我們下期見！👋👋👋

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的组件库实战 | 用vue3+ts实现全局Header和列表数据渲染ColumnList的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。