脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue 渲染dom字符串

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

 更新时间：2023年04月17日 10:12:51   作者：何期骤雨降青霄  
本文主要介绍了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字符串的使用的文章就介绍到这了,更多相关Vue 渲染dom字符串内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue与TypeScript集成配置最简教程(推荐)

    vue与TypeScript集成配置最简教程(推荐)

    本篇文章主要介绍了vue与TypeScript集成配置最简教程(推荐)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Vue 表单输入绑定v-model

    Vue 表单输入绑定v-model

    这篇文章主要介绍了Vue 表单输入绑定v-model，v-model指定可以实现表单值与属性的双向绑定。即表单元素中更改了值会自动的更新属性中的值，属性中的值更新了会自动更新表单中的值 ，下面一起进入文章来哦姐文章详情内容
    2021-10-10
  • Vue.js实现大屏数字滚动翻转效果

    Vue.js实现大屏数字滚动翻转效果

    大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图，该UI图上有一个模块需要有数字往上翻动的效果。本文通过截图代码的形式给大家介绍Vue.js实现大屏数字滚动翻转效果，感兴趣的朋友一起看看吧
    2019-11-11
  • Vite配置路径别名的简单实现方法

    Vite配置路径别名的简单实现方法

    Vite项目中我们可以手动将src路径设置**@**路径别名,可以省下很多引入路径的冗余路径,下面这篇文章主要给大家介绍了关于Vite配置路径别名的简单实现方法,需要的朋友可以参考下
    2023-04-04
  • 使用Webpack提升Vue.js应用程序的4种方法（翻译）

    使用Webpack提升Vue.js应用程序的4种方法（翻译）

    这篇文章主要介绍了使用Webpack提升Vue.js应用程序的4种方法（翻译），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 详解Vue生命周期的示例

    详解Vue生命周期的示例

    本篇文章主要介绍了详解Vue生命周期的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • vue实现购物车全部功能的简单方法

    vue实现购物车全部功能的简单方法

    vue是前端轻量级MVVM框架,入门门槛相对较低,今天用Vue做一个购物车实例,所以下面这篇文章主要给大家介绍了关于vue实现购物车全部功能的简单方法,需要的朋友可以参考下
    2021-07-07
  • Vue 中生命周期定义及流程

    Vue 中生命周期定义及流程

    这篇文章主要介绍了Vue中生命周期定义及流程，生命周期又被称为生命周期回调函数、生命周期函数或生命周期钩子，下文关于其更多有趣的介绍需要的小伙伴可以参考一下文章详细内容
    2022-05-05
  • vue.js element-ui tree树形控件改iview的方法

    vue.js element-ui tree树形控件改iview的方法

    这篇文章主要介绍了vue.js element-ui tree树形控件改iview的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • VUE 常规截取和特殊字符之前之后截取(实例代码)

    VUE 常规截取和特殊字符之前之后截取(实例代码)

    这篇文章主要介绍了VUE 常规截取和特殊字符之前之后截取,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-10-10

最新评论