Vue實現(xiàn)插槽下渲染dom字符串的使用
前言
Vue插槽想必大家都不陌生了,它可以在使用組件的時候決定組件的一部分內(nèi)容如何渲染。但我最近遇到個需求需要將 dom
字符串插入到插槽下動態(tài)渲染插槽的內(nèi)容,查找了很多資料都沒找到相關(guān)的內(nèi)容,后來自己想辦法解決了,特此寫個文章記錄下。
需求
先來簡單介紹下需求:這是在開發(fā)一個低代碼平臺的時候所遇到的需求,用戶可以自己寫一些組件上傳到平臺,在使用的時候可以對組件的 props
slots
events
進行配置,這就涉及到了動態(tài)插槽內(nèi)容的實現(xiàn)了。對于代碼編輯器的實現(xiàn)使用了 code-mirror,感興趣的可以去看下,這里就不多說了。這里主要講如何實現(xiàn)動態(tài)插槽內(nèi)容渲染。
先來大致看下代碼的上下文:
<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>
這樣的確實現(xiàn)了動態(tài)渲染插槽內(nèi)容的需求,但是多出一個標簽總是感覺不太妥當;而且也很難保證這個多出的 span
不會對組件的布局產(chǎn)生影響。這讓我又陷入的沉思...
v-outerHTML
既然 innerHTML
不完全滿足需求,那么使用 outerHTML
不就完美解決這個問題了嗎?于是我去查關(guān)于 vue
如何使用 outerHTML
相關(guān)資料,發(fā)現(xiàn)并沒有很好的案例,那就自己實現(xiàn)一個吧。
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>
代碼保存,頁面一刷新,這不完美實現(xiàn)了嗎?但是等我去編輯 dom
字符串并保存后發(fā)現(xiàn)問題了,組件渲染內(nèi)容并沒有改變,控制臺也報錯了。
什么原因呢?原來是因為在 update
階段時,span
已不在頁面中,因此無法對他執(zhí)行 outerHTML
賦值。
那怎么辦呢?只需要在 bind
階段記住 span
的父節(jié)點,然后在更新階段手動再創(chuàng)建一個 span
并 append
到父節(jié)點下,再進行 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 } } } })()
到此這篇關(guān)于Vue實現(xiàn)插槽下渲染dom字符串的使用的文章就介紹到這了,更多相關(guān)Vue 渲染dom字符串內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
如何基于vue-cli3.0構(gòu)建功能完善的移動端架子
這篇文章主要介紹了基于vue-cli3.0構(gòu)建功能完善的移動端架子,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-04-04vue2和elementUI?實現(xiàn)落日余暉登錄頁和滑塊校驗功能
這篇文章主要介紹了vue2和elementUI打造落日余暉登錄頁和滑塊校驗,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-06-06vue3 elementPlus 表格實現(xiàn)行列拖拽及列檢索功能(完整代碼)
本文通過實例代碼給大家介紹vue3 elementPlus 表格實現(xiàn)行列拖拽及列檢索功能,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10