vue3如何封裝Notification組件

這篇文章給大家分享的是有關vue3如何封裝Notification組件的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

彈窗組件的思路基本一致：向body插入一段HTML。我將從創建、插入、移除這三個方面來說我的做法

先來創建文件吧

|-- packages
    |-- notification
        |-- index.js # 組件的入口
        |-- src
            |-- Notification.vue # 模板
            |-- notification.ts

創建

用到h，render，h是vue3對createVnode()的簡寫。h()把Notification.vue變成虛擬dom，render()把虛擬dom變成節點。render在渲染時需要一個節點(第二個參數)，創建一個只用來裝Notification.vue的容器，我要的只是Notification.vue里面的HTML結構，所以創建了container先將vm變成節點，也就是HTML，這樣才能插到body中

import { h, render } from "vue"
import NotificationVue from "./Notification.vue"

let container = document.createElement('div')
let vm = h(NotificationVue)
render(vm, container)

懵逼點：為什么.vue文件在App.vue中能渲染出來，在這里需要先轉成虛擬dom再轉成節點

插入

通過document.body.appendChild把這個節點內的第一個子元素插入body中，這樣就能在頁面上顯示出來了。

document.body.appendChild(container.firstElementChild)

移除

vue不能直接操作dom，只能操作虛擬dom了，用null覆蓋掉原來的內容即可

render(null, container)

沒懂vue實現原理也只是把效果做出來而已，網上查閱資料也差不多一個月了才做出來，看來我確實不適合編程

完整代碼

// Notification.vue
<template>
  <div class="notification">
    Notification
    <button @click="onClose">x</button>
  </div>
</template>

<script setup lang="ts">
interface Props {
  onClose?: () => void
}

defineProps<Props>()
</script>

有個疑問為什么.vue文件在app中又能直接被渲染出來

// notification.ts
import { h, render } from "vue"
import NotificationVue from "./Notification.vue"
const notification = () => {
  let container = document.createElement('div')
  let vm = h(NotificationVue, {onClose: close})
  render(vm, container)
  document.body.appendChild(container.firstElementChild)

  // 手動關閉
  function close() {
    render(null, container)
  }
}
export default notification

在App.vue中使用

// App.vue
<script setup lang="ts">
import {
  BNotification
} from "../packages"

BNotification()
</script>

感謝各位的閱讀！關于“vue3如何封裝Notification組件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！