快捷導(dǎo)航

Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用

更新時(shí)間：2023年04月17日 10:12:51 作者：何期驟雨降青霄

本文主要介紹了Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

Vue插槽想必大家都不陌生了，它可以在使用組件的時(shí)候決定組件的一部分內(nèi)容如何渲染。但我最近遇到個(gè)需求需要將 dom 字符串插入到插槽下動(dòng)態(tài)渲染插槽的內(nèi)容，查找了很多資料都沒找到相關(guān)的內(nèi)容，后來自己想辦法解決了，特此寫個(gè)文章記錄下。

需求

先來簡(jiǎn)單介紹下需求：這是在開發(fā)一個(gè)低代碼平臺(tái)的時(shí)候所遇到的需求，用戶可以自己寫一些組件上傳到平臺(tái)，在使用的時(shí)候可以對(duì)組件的 props slots events 進(jìn)行配置，這就涉及到了動(dòng)態(tài)插槽內(nèi)容的實(shí)現(xiàn)了。對(duì)于代碼編輯器的實(shí)現(xiàn)使用了 code-mirror，感興趣的可以去看下，這里就不多說了。這里主要講如何實(shí)現(xiàn)動(dòng)態(tài)插槽內(nèi)容渲染。

先來大致看下代碼的上下文：

<template>
    <Component
        v-bind="componentProps"
    >
        <template
            v-for="item of componentSlots"
            #[item[0]]
        >
            
        </template>
    </Component>
</template>

<script setup lang="ts">
    const Component = defineAsyncComponent({
        // ...
    })
    const componentProps = ref({})
    const componentSlots = ref<[string, string][]>([])
    
    onMounted(async () => {
        componentProps.value = await loadProps()
        componentSlots.value = await loadSlots()
    })
</script>

v-html

說到渲染 dom 字符串，那 v-html 肯定是首要想到的。但是 template 標(biāo)簽上是無法使用 v-html 的，那么只能在 template 下寫一個(gè)普通元素來塞 dom 字符串，代碼如下：

<template
    v-for="item of componentSlots"
    #[item[0]]
>
    <span v-html="item[1]">
    </span>
</template>

這樣的確實(shí)現(xiàn)了動(dòng)態(tài)渲染插槽內(nèi)容的需求，但是多出一個(gè)標(biāo)簽總是感覺不太妥當(dāng)；而且也很難保證這個(gè)多出的 span 不會(huì)對(duì)組件的布局產(chǎn)生影響。這讓我又陷入的沉思...

v-outerHTML

既然 innerHTML 不完全滿足需求，那么使用 outerHTML 不就完美解決這個(gè)問題了嗎？于是我去查關(guān)于 vue 如何使用 outerHTML 相關(guān)資料，發(fā)現(xiàn)并沒有很好的案例，那就自己實(shí)現(xiàn)一個(gè)吧。

export const vOuterHTML = {
    bind(el, binding) {
        el.outerHTML = binding.value
    },
    update(el, binding) {
        el.outerHTML = binding.value
    },
}

<template
    v-for="item of componentSlots"
    #[item[0]]
>
    <span v-outerHTML="item[1]">
    </span>
</template>

代碼保存，頁面一刷新，這不完美實(shí)現(xiàn)了嗎？但是等我去編輯 dom 字符串并保存后發(fā)現(xiàn)問題了，組件渲染內(nèi)容并沒有改變，控制臺(tái)也報(bào)錯(cuò)了。

什么原因呢？原來是因?yàn)樵?update 階段時(shí)，span 已不在頁面中，因此無法對(duì)他執(zhí)行 outerHTML 賦值。

那怎么辦呢？只需要在 bind 階段記住 span 的父節(jié)點(diǎn)，然后在更新階段手動(dòng)再創(chuàng)建一個(gè) span 并 append 到父節(jié)點(diǎn)下，再進(jìn)行 outerHTML賦值即可，代碼如下：

export const vOuterHTML = (() => {
    let parentNode = null
    
    return {
        bind(el, binding) {
            parentNode = el.parentNode
            el.outerHTML = binding.value
        },
        update(el, binding) {
            if (parentNode) {
                const span = document.createElement('span')
                parentNode.appendChild(span)
                span.outerHTML = binding.value
            }
        },
        unbind() {
            if (parentNode) {
                parentNode = null
            }
        }
    }
})()

到此這篇關(guān)于Vue實(shí)現(xiàn)插槽下渲染dom字符串的使用的文章就介紹到這了,更多相關(guān)Vue 渲染dom字符串內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: