Vue命令式組件的編寫與應(yīng)用小結(jié)
1.引言
大家好！今天我們來聊聊Vue.js中的一個有趣話題——命令式組件。你有沒有覺得，有時候我們在Vue模板里寫組件，就像是在玩搭積木，每個積木都有固定的形狀和位置？雖然這樣很直觀，但有時候我們可能需要更多的自由度來發(fā)揮創(chuàng)意。
這就是命令式組件登場的時候了。它們就像是你的個人DJ，在你需要的時候播放你想要的音樂。不需要預(yù)先在模板中定義，你可以直接在JavaScript中調(diào)用它們，就像是調(diào)用一個函數(shù)一樣簡單。這種方式不僅讓組件的使用變得更加靈活，還能讓你的代碼看起來更加干凈利落。
在這篇文章中，我會帶你了解命令式組件的基本概念，并通過一些簡單的示例來展示它們是如何工作的。我們將一起看看，如何用幾行代碼就能讓組件聽從你的指揮，以及這樣做能為你的Vue項目帶來哪些好處。
準(zhǔn)備好了嗎？讓我們開始這段輕松愉快的學(xué)習(xí)旅程，探索Vue命令式組件的魅力吧！
2.傳統(tǒng)的組件
（假設(shè)我們現(xiàn)在需要編寫一個MessageBox組件）
在傳統(tǒng)的組件定義中，我們通常需要這么幾步：
- 接收父組件的屬性值
- 接收自定義事件
- 組件的結(jié)構(gòu)布局，樣式
- 給組件綁定不要的事件
最后在使用組件的時候，我們還得在父組件中，在模板中渲染出來，如果有時候我們嘚控制子組件的顯示與否，還得添加控制的字段，總之就是有一些情況下很麻煩。
下這樣一個MessageBox組件
這是部分代碼：
MessageBox.vue
<template>
<div class="message-box" v-if="show">
<div class="inner">
<div :class="['header', type]">
<h1>{{ title }}</h1>
</div>
<div class="content">
<p>
{{ content }}
</p>
<button @click="closeMessageBox" :class="['btn', type]">{{ btntext }}</button>
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
title: {
type: String,
default: 'Title'
},
btntext: {
type: String,
default: '確定'
},
content: {
type: String,
default: 'Content'
},
show: {
type: Boolean,
default: false
},
type: {
type: String,
default: 'primary',
validate: (val) => ['primary', 'success', 'warning', 'error'].includes(val)
}
})
const emits = defineEmits(['handler-visible'])
const closeMessageBox = () => {
emits('handler-visible', false)
}
</script>
<style lang="scss" scoped>
.message-box {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .5);
.inner {
width: 300px;
height: 200px;
background-color: #fff;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
transform: translate(-50%, -50%);
.content {
margin-top: 20px;
.btn {
//去除樣式
border: none;
outline: none;
padding: 6px 15px;
border-radius: 5px;
//靠右下角
position: absolute;
right: 10px;
bottom: 10px;
}
}
.header {
height: 38px;
line-height: 38px;
padding: 0 10px;
}
.primary {
background-color: skyblue;
color: #fff;
}
.success {
background-color: green;
color: #fff;
}
.warning {
background-color: yellow;
color: #fff;
}
.error {
background-color: red;
color: #fff;
}
}
}
</style>使用的時候得渲染出來
<template>
<div>
<MessageBox title="標(biāo)題" type="primary" btntext="close" @handler-visible="setVisible" :show="isVisible">
This is a messagebox
</MessageBox>
<button @click="setVisible">顯示MessageBox</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
import MessageBox from '../components/MessageBox.vue';
const isVisible = ref(false);
const setVisible = () => {
isVisible.value = true;
}
</script>3.命令式組件
如果遇到很多這種組件，就會感覺很麻煩，又得定義屬性，又得設(shè)置自定義事件的回調(diào)函數(shù)，子組件還得接收。
這時候命令式組件的優(yōu)勢就體現(xiàn)出來了，他能讓我們像調(diào)用函數(shù)的api一樣，很輕松的就能實現(xiàn)組件的渲染。
在父組件中的代碼就可以精簡成這樣：
<template>
<div>
<button @click="setVisible">顯示MessageBox</button>
</div>
</template>
<script setup>
import MessageBox from '../components/MessageBox';
console.log(MessageBox);
const setVisible = () => {
MessageBox.alert({
title: '標(biāo)題',
type: 'primary',
btntext: 'close',
content: '這是主要的內(nèi)容信息'
}, () => {
console.log('關(guān)閉了')
})
}
</script>我們的自定義事件也是沒了，顯示的控制開關(guān)也沒了，那么子組件需要做出一些修改，接收一個函數(shù)回調(diào)，但不過是相當(dāng)于接收props。
<template>
<div class="message-box">
<div class="inner">
<div :class="['header', type]">
<h1>{{ title }}</h1>
</div>
<div class="content">
<p>
{{ content }}
</p>
<button @click="close" :class="['btn', type]">{{ btntext }}</button>
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
title: {
type: String,
default: 'Title'
},
btntext: {
type: String,
default: '確定'
},
content: {
type: String,
default: 'Content'
},
type: {
type: String,
default: 'primary',
validate: (val) => ['primary', 'success', 'warning', 'error'].includes(val)
},
close: Function
})
// const emits = defineEmits(['handler-visible'])
// const closeMessageBox = () => {
// emits('handler-visible', false)
// }
</script>這時候我們需要新添加一個js文件，可以定義在同文件夾目錄下，index.js，在組件中引入：import MessageBox from '../components/MessageBox';默認(rèn)引入的是js文件喔。
index.js文件中，我們要知道，如果我們不在頁面模板中使用組件，要將其渲染在頁面上，那么肯定得創(chuàng)建一個html頁面模板(也可以叫應(yīng)用實例)，將其添加到頁面當(dāng)中去。
在本例中的MessageBox是打開時會渲染到頁面，關(guān)閉后，又會從頁面中刪除。
此時我們必須要用到的就是 Vue 中的:createApp這個API了，我們要創(chuàng)建一個應(yīng)用實例，將其掛載到某個地方，使其成為Vue的應(yīng)用實例，這樣他才能享用關(guān)于Vue的一切，包括props等屬性。
import MessageBox from './index.vue'
import { createApp } from 'vue'
MessageBox.alert = (props, callback) => {
const container = document.createElement('div')
const messageBox = createApp(MessageBox, { ...props, close })
open()
function open() {
messageBox.mount(container)
document.body.appendChild(container)
}
function close() {
messageBox.unmount(container)
document.body.removeChild(container)
if (typeof callback === 'function') {
callback()
}
}
}
export default MessageBox在調(diào)用時創(chuàng)建應(yīng)用實例掛載到body上，close函數(shù)調(diào)用后，卸載掉組件，從body中移除
現(xiàn)在就可以像這樣子使用了
<template>
<div>
<button @click="setVisible">顯示MessageBox</button>
</div>
</template>
<script setup>
import MessageBox from '../components/MessageBox';
console.log(MessageBox);
const setVisible = () => {
MessageBox.alert({
title: '標(biāo)題',
type: 'primary',
btntext: 'close',
content: '這是主要的內(nèi)容信息'
}, () => {
console.log('關(guān)閉了')
})
}
</script>
在回調(diào)函數(shù)中，我們還可以進行一些其他的操作，無論是數(shù)據(jù)的獲取，修改等等。
如果關(guān)閉了此dom就會從頁面中移除并調(diào)用回調(diào)函數(shù)。
我們也可以多定義幾個回調(diào)函數(shù)，具體看需求
4.命令式組件的應(yīng)用場景
命令式組件在Vue中的使用場景主要體現(xiàn)在需要動態(tài)、程序化地控制組件實例的時候。以下是一些典型的使用場景：
- 模態(tài)對話框（Modals）: 命令式組件非常適合創(chuàng)建模態(tài)對話框，如確認(rèn)框、警告框等。你可以動態(tài)地調(diào)用一個函數(shù)來顯示模態(tài)框，并傳入所需的參數(shù)和回調(diào)。
- 彈出窗口（Popups）: 無論是提示信息、下拉菜單還是其他類型的彈出窗口，命令式組件都允許你通過編程的方式控制它們的顯示和隱藏。
- 懶加載組件（Lazy-loaded components）: 當(dāng)組件需要根據(jù)某些條件或用戶交互才加載時，命令式組件可以確保組件實例僅在需要時才被創(chuàng)建和掛載。
- 全局通知（Global notifications）: 全局通知系統(tǒng)，如Toast或Snackbar，通常需要在應(yīng)用的任何地方通過一個函數(shù)調(diào)用來觸發(fā)顯示。
- 導(dǎo)航守衛(wèi)中的確認(rèn)邏輯: 在Vue Router的導(dǎo)航守衛(wèi)中，你可能需要在用戶嘗試導(dǎo)航離開一個頁面之前確認(rèn)他們未保存的更改。命令式組件可以用來創(chuàng)建一個確認(rèn)對話框。
- 異步操作的反饋: 當(dāng)執(zhí)行異步操作（如發(fā)送API請求）時，你可能需要顯示一個加載指示器或反饋消息。命令式組件可以在異步操作的不同階段被創(chuàng)建和銷毀。
- 條件渲染組件: 如果你的組件需要根據(jù)運行時的條件來決定是否渲染，命令式組件可以讓你在條件滿足時動態(tài)創(chuàng)建組件實例。
- 動態(tài)組件庫（Dynamic component libraries）: 當(dāng)你在開發(fā)一個組件庫時，命令式組件可以讓你的組件更容易地被集成到其他項目中，因為它們不需要在模板中預(yù)定義。
- 測試和調(diào)試: 在自動化測試或調(diào)試時，命令式組件允許你更容易地控制組件的生命周期，從而進行更精確的測試和問題重現(xiàn)。
- 組件編排（Component orchestration）: 當(dāng)你需要在父組件中精確控制多個子組件的交互和生命周期時，命令式組件提供了一種直接的方式來編程化地管理這些交互。
命令式組件的核心優(yōu)勢在于它們提供了更大的控制靈活性，允許開發(fā)者根據(jù)應(yīng)用的具體需求和交互邏輯來動態(tài)地創(chuàng)建和銷毀組件實例。這種方式特別適用于那些不適合在模板中靜態(tài)聲明的組件使用場景。
到此這篇關(guān)于Vue命令式組件的編寫與應(yīng)用的文章就介紹到這了,更多相關(guān)Vue命令式組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
通過vue-router懶加載解決首次加載時資源過多導(dǎo)致的速度緩慢問題
這篇文章主要介紹了vue-router懶加載解決首次加載時資源過多導(dǎo)致的速度緩慢問題,文中單獨給大家介紹了vue router路由懶加載問題，需要的朋友可以參考下2018-04-04
本文主要介紹了vue實現(xiàn)兩列水平時間軸的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了vue3-HOOKS模塊化處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue如何導(dǎo)出文件流獲取附件名稱并下載(在response.headers里解析filename導(dǎo)出)
這篇文章主要介紹了vue如何導(dǎo)出文件流獲取附件名稱并下載(在response.headers里解析filename導(dǎo)出),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了基于Vue的文字跑馬燈組件(npm 組件包),需要的朋友可以參考下2017-05-05
父子組件生命周期及子組件獲取數(shù)據(jù)傳值問題剖析
這篇文章主要介紹了父子組件生命周期及子組件獲取數(shù)據(jù)問題剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10
這篇文章主要介紹了Vue 動態(tài)添加路由及生成菜單的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
解決removeEventListener 無法清除監(jiān)聽的問題
這篇文章主要介紹了解決removeEventListener 無法清除監(jiān)聽的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue+element-ui監(jiān)聽滾動實現(xiàn)錨點定位方式(雙向),錨點問題
這篇文章主要介紹了vue+element-ui監(jiān)聽滾動實現(xiàn)錨點定位方式(雙向),錨點問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Ant Design Vue 添加區(qū)分中英文的長度校驗功能
這篇文章主要介紹了Ant Design Vue 添加區(qū)分中英文的長度校驗功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下功能，2020-01-01