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

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

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

1.引言

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

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

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

準備好了嗎？讓我們開始這段輕松愉快的學習旅程，探索Vue命令式組件的魅力吧！

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

（假設我們現(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="標題" 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.命令式組件

如果遇到很多這種組件，就會感覺很麻煩，又得定義屬性，又得設置自定義事件的回調(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: '標題',
    type: 'primary',
    btntext: 'close',
    content: '這是主要的內(nèi)容信息'
  }, () => {
    console.log('關閉了')
  })
}
</script>

我們的自定義事件也是沒了，顯示的控制開關也沒了，那么子組件需要做出一些修改，接收一個函數(shù)回調(diào)，但不過是相當于接收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';默認引入的是js文件喔。

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

在本例中的MessageBox是打開時會渲染到頁面，關閉后，又會從頁面中刪除。

此時我們必須要用到的就是 Vue 中的:createApp這個API了，我們要創(chuàng)建一個應用實例，將其掛載到某個地方，使其成為Vue的應用實例，這樣他才能享用關于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)建應用實例掛載到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: '標題',
    type: 'primary',
    btntext: 'close',
    content: '這是主要的內(nèi)容信息'
  }, () => {
    console.log('關閉了')
  })
}
</script>

在回調(diào)函數(shù)中，我們還可以進行一些其他的操作，無論是數(shù)據(jù)的獲取，修改等等。

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

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

4.命令式組件的應用場景

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

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