vue自定義組件插入到body中的實(shí)現(xiàn)方式
更新時(shí)間：2025年12月13日 14:31:34 作者：@紅@旗下的小兵
文章介紹了如何在Vue中創(chuàng)建一個(gè)自定義的notice提醒組件,并將其插入到body中,該組件通過調(diào)用`show`方法顯示,調(diào)用`remove`方法銷毀,主要步驟包括創(chuàng)建組件、使用render函數(shù)加載、$mount掛載并插入到body中
vue自定義組件插入到body中
以notice提醒組件為例，調(diào)用組件，如下：
實(shí)現(xiàn)了兩個(gè)方法
- show方法時(shí)顯示組件
- remove方法銷毀組件
// 加載組件
let noticeCom = vm.$create({
title: '提醒標(biāo)題',
content: '提醒內(nèi)容',
duration: 2000 // 組件的顯示時(shí)長
}).show()
// 銷毀
noticeCom.remove()實(shí)現(xiàn)思路
- （1）首先創(chuàng)建組件
- （2）使用render函數(shù)加載組件
- （3）$mount掛載組件，把組件渲染為真實(shí)dom
- （4）把dom插入到body中去
Notice.vue組件：
<!--Notice.vue組件-->
<template>
<div v-if="isShow" class="notices">
<div>{{title}}</div><div>{{contents}}</div>
</div>
</template>
<script>
export default {
props: {title: String, contents: String, duration: Number},
data() {return {isShow: false}},
methods: {
show() { // show 方法控制組件的顯示
this.isShow = true
let timer = setTimeout(() => {
this.isShow = false
clearTimeout(timer)
}, this.duration)
}
}
}
</script>在main.js中，把渲染Notice組件的方法掛載到vue實(shí)例上：
// main.js 把notice組件渲染掛載到vue實(shí)例上 import notice from "@/components/notice.js" Vue.prototype.$create = notice
notice.js：
// notice.js 加載組件的主文件
import Vue from 'vue'
export default function create(component, props) {
let vm = new Vue({
// 使用render函數(shù)渲染組件
render(h) {
return h(component,{props})
}
}).$mount()
document.body.appendChild(vm.$el) // vm.$el 是Notice組件掛載的根節(jié)點(diǎn)<div class="notices">··· ···</div>
const noticeComponent = vm.$children[0]
// 組件掛載銷毀實(shí)例的方法（實(shí)際就是刪除dom）
noticeComponent.removeNotice = function () {
document.body.remove(vm.$el)
}
return noticeComponent
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0中vue-cli實(shí)現(xiàn)全選、單選計(jì)算總價(jià)格的實(shí)例代碼
本篇文章主要介紹了vue2.0中vue-cli實(shí)現(xiàn)全選、單選計(jì)算總價(jià)格的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果詳解
這篇文章主要介紹了vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue3初探之ref、reactive以及改變數(shù)組的值
在setup函數(shù)中,可以使用ref函數(shù)和reactive函數(shù)來創(chuàng)建響應(yīng)式數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue3初探之ref、reactive以及改變數(shù)組值的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹一下如何在Vue3中實(shí)現(xiàn)自定義指令，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的同學(xué)可以參考一下2022-07-07
Vue項(xiàng)目實(shí)現(xiàn)i18n國際化多語言切換方案實(shí)踐
本文將圍繞Vue項(xiàng)目國際化,借助官方提供的Vue I18n插件,介紹,講解安裝配置、多語言切換、復(fù)雜場景應(yīng)用及優(yōu)化等,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2025-09-09
對于Vue項(xiàng)目來說，如果遇到一個(gè)埋點(diǎn)的需求，我們最好的解決方案就是封裝一個(gè)指令，所以本文就來和大家詳細(xì)講講具體是如何封裝埋點(diǎn)指令的吧2023-08-08
vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行的示例代碼
這篇文章主要介紹了vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vue的v-on與v-bind,v-on就是用于綁定事件的,下面這篇文章主要給大家介紹了關(guān)于vue3常用的指令之v-bind和v-on指令用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
平時(shí)在獲取真實(shí)DOM的時(shí)候獲取不到最新的DOM元素，使用$nextTick就可以，那為什么$nextTick就可以獲取到最新的DOM元素呢，本文就來帶著這兩個(gè)問題來解析一下nextTick的原理2023-05-05
vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定，幫大家解析神秘的Object.defineProperty方法2017-03-03