文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue实现插槽下渲染dom字符串的使用

2023-05-16 14:32

关注

前言

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 的父节点,然后在更新阶段手动再创建一个 spanappend 到父节点下,再进行 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字符串的使用的文章就介绍到这了,更多相关Vue 渲染dom字符串内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯