您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關vue可重用組件的示例分析的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
可重用組件不一定是大的或復雜的東西,我經常使小而短的組件可重復使用。因為我不會到處重寫這段代碼,更新它變得容易得多,而且我可以確保每個OverflowMenu
看起來和工作完全一樣——因為它們是一樣的!
<!-- OverflowMenu.vue --> <template> <Menu> <!-- 添加自定義按鈕來觸發我們的菜單 --> <template #button v-slot="bind"> <!-- 使用 bind 傳遞點擊處理程序、a11y 屬性等。 --> <Button v-bind="bind"> <!-- 使用我們自己的“...”圖標,此按鈕沒有文字 --> <template #icon> <svg src="./ellipsis.svg" /> </template> </Button> </template> </Menu> </template>
這里我們使用了一個Menu
組件,但是在觸發它打開的按鈕上添加了一個“...”(省略號)圖標。可能并不不值得用它來制作可重用的組件,因為它只有幾行。每次我們想使用Menu這樣的時候,我們不能只添加圖標嗎?但這OverflowMenu
將使用數十次,現在如果我們想要更新圖標或其行為,我們可以很容易地做到。而且使用起來也簡單多了!
<template> <OverflowMenu :menu-items="items" @click="handleMenuClick" /> </template>
感謝各位的閱讀!關于“vue可重用組件的示例分析”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。