Vue如何實現插槽下渲染dom字符串使用

本篇內容介紹了“Vue如何實現插槽下渲染dom字符串使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

需求

先來簡單介紹下需求：這是在開發一個低代碼平臺的時候所遇到的需求，用戶可以自己寫一些組件上傳到平臺，在使用的時候可以對組件的 props slots events 進行配置，這就涉及到了動態插槽內容的實現了。對于代碼編輯器的實現使用了 code-mirror，感興趣的可以去看下，這里就不多說了。這里主要講如何實現動態插槽內容渲染。

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

<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 標簽上是無法使用 v-html 的，那么只能在 template 下寫一個普通元素來塞 dom 字符串，代碼如下：

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

這樣的確實現了動態渲染插槽內容的需求，但是多出一個標簽總是感覺不太妥當；而且也很難保證這個多出的 span 不會對組件的布局產生影響。這讓我又陷入的沉思...

v-outerHTML

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

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>

代碼保存，頁面一刷新，這不完美實現了嗎？但是等我去編輯 dom 字符串并保存后發現問題了，組件渲染內容并沒有改變，控制臺也報錯了。

什么原因呢？原來是因為在 update 階段時，span 已不在頁面中，因此無法對他執行 outerHTML 賦值。

那怎么辦呢？只需要在 bind 階段記住 span 的父節點，然后在更新階段手動再創建一個 span 并 append 到父節點下，再進行 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
            }
        }
    }
})()

“Vue如何實現插槽下渲染dom字符串使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！