本篇内容介绍了“Vue如何实现插槽下渲染dom字符串使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

需求

先来简单介绍下需求：这是在开发一个低代码平台的时候所遇到的需求，用户可以自己写一些组件上传到平台，在使用的时候可以对组件的

props

slots

events

先来大致看下代码的上下文：

<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

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
            }
        }
    }
})()