vue3如何封裝Notification組件

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

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

先來創(chuàng)建文件吧

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

創(chuàng)建

用到h，render，h是vue3對(duì)createVnode()的簡(jiǎn)寫。h()把Notification.vue變成虛擬dom，render()把虛擬dom變成節(jié)點(diǎn)。render在渲染時(shí)需要一個(gè)節(jié)點(diǎn)(第二個(gè)參數(shù))，創(chuàng)建一個(gè)只用來裝Notification.vue的容器，我要的只是Notification.vue里面的HTML結(jié)構(gòu)，所以創(chuàng)建了container先將vm變成節(jié)點(diǎn)，也就是HTML，這樣才能插到body中

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

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

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

插入

通過document.body.appendChild把這個(gè)節(jié)點(diǎn)內(nèi)的第一個(gè)子元素插入body中，這樣就能在頁(yè)面上顯示出來了。

document.body.appendChild(container.firstElementChild)

移除

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

render(null, container)

沒懂vue實(shí)現(xiàn)原理也只是把效果做出來而已，網(wǎng)上查閱資料也差不多一個(gè)月了才做出來，看來我確實(shí)不適合編程

完整代碼

// 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>

有個(gè)疑問為什么.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)

  // 手動(dòng)關(guān)閉
  function close() {
    render(null, container)
  }
}
export default notification

在App.vue中使用

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

BNotification()
</script>

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