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.js中如何实现自定义下拉菜单指令，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了基于vue-cli3.0构建功能完善的移动端架子，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
vue2和elementUI 实现落日余晖登录页和滑块校验功能
这篇文章主要介绍了vue2和elementUI打造落日余晖登录页和滑块校验,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-06-06
这篇文章主要为大家介绍了Vue中$refs和$nextTick的使用方法，文中的示例代码讲解详细，对我们学习Vue有一定帮助，需要的可以参考一下2022-03-03
在 Vue3.x 中,组件间的参数传递是构建复杂应用时不可或缺的一部分,无论是父子组件还是兄弟组件之间,合理的数据流动都是保持应用状态一致性和可维护性的关键,本文将通过示例代码,详细介绍 Vue3.x 中组件间如何传递参数,需要的朋友可以参考下2024-03-03
今天小编就为大家分享一篇关于vue-router命名视图的使用讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
这篇文章主要介绍了vue3中的hooks总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家详细介绍了vue获取验证码倒计时组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
今天小编就为大家分享一篇vuex直接赋值的三种方法总结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue3 elementPlus 表格实现行列拖拽及列检索功能(完整代码)
本文通过实例代码给大家介绍vue3 elementPlus 表格实现行列拖拽及列检索功能,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
最新评论