Vue命令式組件的編寫與應(yīng)用小結(jié)

更新時(shí)間：2024年03月18日 15:26:52 作者：不會寫代碼只會CV

這篇文章主要介紹了Vue命令式組件的編寫與應(yīng)用小結(jié),在這篇文章中,我會帶你了解命令式組件的基本概念,并通過一些簡單的示例來展示它們是如何工作的,需要的朋友可以參考下

1.引言

大家好！今天我們來聊聊Vue.js中的一個(gè)有趣話題——命令式組件。你有沒有覺得，有時(shí)候我們在Vue模板里寫組件，就像是在玩搭積木，每個(gè)積木都有固定的形狀和位置？雖然這樣很直觀，但有時(shí)候我們可能需要更多的自由度來發(fā)揮創(chuàng)意。

這就是命令式組件登場的時(shí)候了。它們就像是你的個(gè)人DJ，在你需要的時(shí)候播放你想要的音樂。不需要預(yù)先在模板中定義，你可以直接在JavaScript中調(diào)用它們，就像是調(diào)用一個(gè)函數(shù)一樣簡單。這種方式不僅讓組件的使用變得更加靈活，還能讓你的代碼看起來更加干凈利落。

在這篇文章中，我會帶你了解命令式組件的基本概念，并通過一些簡單的示例來展示它們是如何工作的。我們將一起看看，如何用幾行代碼就能讓組件聽從你的指揮，以及這樣做能為你的Vue項(xiàng)目帶來哪些好處。

準(zhǔn)備好了嗎？讓我們開始這段輕松愉快的學(xué)習(xí)旅程，探索Vue命令式組件的魅力吧！

2.傳統(tǒng)的組件

（假設(shè)我們現(xiàn)在需要編寫一個(gè)MessageBox組件）

在傳統(tǒng)的組件定義中，我們通常需要這么幾步：

接收父組件的屬性值
接收自定義事件
組件的結(jié)構(gòu)布局，樣式
給組件綁定不要的事件

最后在使用組件的時(shí)候，我們還得在父組件中，在模板中渲染出來，如果有時(shí)候我們嘚控制子組件的顯示與否，還得添加控制的字段，總之就是有一些情況下很麻煩。

下這樣一個(gè)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>

使用的時(shí)候得渲染出來

<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ù)，子組件還得接收。

這時(shí)候命令式組件的優(yōu)勢就體現(xiàn)出來了，他能讓我們像調(diào)用函數(shù)的api一樣，很輕松的就能實(shí)現(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)也沒了，那么子組件需要做出一些修改，接收一個(gè)函數(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>

這時(shí)候我們需要新添加一個(gè)js文件，可以定義在同文件夾目錄下，index.js，在組件中引入：import MessageBox from '../components/MessageBox';默認(rèn)引入的是js文件喔。

index.js文件中，我們要知道，如果我們不在頁面模板中使用組件，要將其渲染在頁面上，那么肯定得創(chuàng)建一個(gè)html頁面模板(也可以叫應(yīng)用實(shí)例)，將其添加到頁面當(dāng)中去。

在本例中的MessageBox是打開時(shí)會渲染到頁面，關(guān)閉后，又會從頁面中刪除。

此時(shí)我們必須要用到的就是 Vue 中的:createApp這個(gè)API了，我們要?jiǎng)?chuàng)建一個(gè)應(yīng)用實(shí)例，將其掛載到某個(gè)地方，使其成為Vue的應(yīng)用實(shí)例，這樣他才能享用關(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)用時(shí)創(chuàng)建應(yīng)用實(shí)例掛載到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ù)中，我們還可以進(jìn)行一些其他的操作，無論是數(shù)據(jù)的獲取，修改等等。

如果關(guān)閉了此dom就會從頁面中移除并調(diào)用回調(diào)函數(shù)。

我們也可以多定義幾個(gè)回調(diào)函數(shù)，具體看需求

4.命令式組件的應(yīng)用場景

命令式組件在Vue中的使用場景主要體現(xiàn)在需要?jiǎng)討B(tài)、程序化地控制組件實(shí)例的時(shí)候。以下是一些典型的使用場景：

模態(tài)對話框（Modals）: 命令式組件非常適合創(chuàng)建模態(tài)對話框，如確認(rèn)框、警告框等。你可以動(dòng)態(tài)地調(diào)用一個(gè)函數(shù)來顯示模態(tài)框，并傳入所需的參數(shù)和回調(diào)。
彈出窗口（Popups）: 無論是提示信息、下拉菜單還是其他類型的彈出窗口，命令式組件都允許你通過編程的方式控制它們的顯示和隱藏。
懶加載組件（Lazy-loaded components）: 當(dāng)組件需要根據(jù)某些條件或用戶交互才加載時(shí)，命令式組件可以確保組件實(shí)例僅在需要時(shí)才被創(chuàng)建和掛載。
全局通知（Global notifications）: 全局通知系統(tǒng)，如Toast或Snackbar，通常需要在應(yīng)用的任何地方通過一個(gè)函數(shù)調(diào)用來觸發(fā)顯示。
導(dǎo)航守衛(wèi)中的確認(rèn)邏輯: 在Vue Router的導(dǎo)航守衛(wèi)中，你可能需要在用戶嘗試導(dǎo)航離開一個(gè)頁面之前確認(rèn)他們未保存的更改。命令式組件可以用來創(chuàng)建一個(gè)確認(rèn)對話框。
異步操作的反饋: 當(dāng)執(zhí)行異步操作（如發(fā)送API請求）時(shí)，你可能需要顯示一個(gè)加載指示器或反饋消息。命令式組件可以在異步操作的不同階段被創(chuàng)建和銷毀。
條件渲染組件: 如果你的組件需要根據(jù)運(yùn)行時(shí)的條件來決定是否渲染，命令式組件可以讓你在條件滿足時(shí)動(dòng)態(tài)創(chuàng)建組件實(shí)例。
動(dòng)態(tài)組件庫（Dynamic component libraries）: 當(dāng)你在開發(fā)一個(gè)組件庫時(shí)，命令式組件可以讓你的組件更容易地被集成到其他項(xiàng)目中，因?yàn)樗鼈儾恍枰谀０逯蓄A(yù)定義。
測試和調(diào)試: 在自動(dòng)化測試或調(diào)試時(shí)，命令式組件允許你更容易地控制組件的生命周期，從而進(jìn)行更精確的測試和問題重現(xiàn)。
組件編排（Component orchestration）: 當(dāng)你需要在父組件中精確控制多個(gè)子組件的交互和生命周期時(shí)，命令式組件提供了一種直接的方式來編程化地管理這些交互。