無聊看看

摘要 Vue 3.0 -5 slot 摘要 slot用來將組件定義插槽使用，可將組件的插槽內容 ，由上層元件(呼叫層)所決定顯示的內容，分為三種 (1) 默認插槽: 默認組件插入的位置 (2) 具名插槽:插入具名的插槽 (3) 作用域插槽:由父組件來決定顯示的樣式 例如:提供圖片使用可以命名為useImage； 默認插槽 我們利用slot將商品內容，可以根據我們需要擺放資料格式來擺放 這是商品的圖卡，支援文字、圖片、影像，將 slot顯示內容 檔案路徑: slot\Category.vue <template> < div class = "category" > < h2 > {{ title}} </ h2 > < slot > </ slot > </ div > </template> < script setup lang = "ts" name = "category" > defineProps ([ "title" ]) </ script > < style scoped > .category { background-color : aqua; border-radius : 10px ; box-shadow : 0 0 10px ; padding : 10px ; margin : 0px 10px 0px 10px ; width : 200px ; height : 300px ; } h2 { background-color : orange;

摘要 Vue 3.0 -4 hooks自定義 摘要 hooks 直譯是"鉤子"，hooks命名方式為useXXXX，以use為開頭。所以Hooks是一種自訂的獨立的組件其將封裝內部邏輯，讓該hooks可以重複使用。 例如:提供圖片使用可以命名為useImage； hooks範例 Hook宣告方式 檔案路徑: hooks\useCalculate.ts import { ref } from "vue" ; /** * @description 計算總和的參數 * @param { number } interval 間隔 * @param { number } initValue 初始值 **/ interface useCountParam{ interval : number ; initValue?: number ; } export default function useCalculate ( {initValue= 0 , interval}:useCountParam ){ const sum = ref (initValue) ; function increase ( ): void { sum. value += interval ; } function decrease ( ): void { sum. value -= interval ; } return { sum, increase, decrease } } HooksView.vue <template> <div> <hr> <img v-for=