欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實現(xiàn)插槽下渲染dom字符串的使用

 更新時間:2023年04月17日 10:12:51   作者:何期驟雨降青霄  
本文主要介紹了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)建一個 spanappend 到父節(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.js中如何實現(xiàn)自定義下拉菜單指令

    淺談Vue.js中如何實現(xiàn)自定義下拉菜單指令

    這篇文章主要介紹了淺談Vue.js中如何實現(xiàn)自定義下拉菜單指令,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • 如何基于vue-cli3.0構(gòu)建功能完善的移動端架子

    如何基于vue-cli3.0構(gòu)建功能完善的移動端架子

    這篇文章主要介紹了基于vue-cli3.0構(gòu)建功能完善的移動端架子,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • vue2和elementUI?實現(xiàn)落日余暉登錄頁和滑塊校驗功能

    vue2和elementUI?實現(xiàn)落日余暉登錄頁和滑塊校驗功能

    這篇文章主要介紹了vue2和elementUI打造落日余暉登錄頁和滑塊校驗,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2023-06-06
  • 詳解Vue中$refs和$nextTick的使用方法

    詳解Vue中$refs和$nextTick的使用方法

    這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法,文中的示例代碼講解詳細,對我們學習Vue有一定幫助,需要的可以參考一下
    2022-03-03
  • 詳解Vue3.x中組件間參數(shù)傳遞的示例代碼

    詳解Vue3.x中組件間參數(shù)傳遞的示例代碼

    在?Vue3.x?中,組件間的參數(shù)傳遞是構(gòu)建復雜應(yīng)用時不可或缺的一部分,無論是父子組件還是兄弟組件之間,合理的數(shù)據(jù)流動都是保持應(yīng)用狀態(tài)一致性和可維護性的關(guān)鍵,本文將通過示例代碼,詳細介紹?Vue3.x?中組件間如何傳遞參數(shù),需要的朋友可以參考下
    2024-03-03
  • vue-router命名視圖的使用講解

    vue-router命名視圖的使用講解

    今天小編就為大家分享一篇關(guān)于vue-router命名視圖的使用講解,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • vue3中的hooks總結(jié)

    vue3中的hooks總結(jié)

    這篇文章主要介紹了vue3中的hooks總結(jié),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • vue獲取驗證碼倒計時組件

    vue獲取驗證碼倒計時組件

    這篇文章主要為大家詳細介紹了vue獲取驗證碼倒計時組件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-08-08
  • vuex直接賦值的三種方法總結(jié)

    vuex直接賦值的三種方法總結(jié)

    今天小編就為大家分享一篇vuex直接賦值的三種方法總結(jié),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue3 elementPlus 表格實現(xiàn)行列拖拽及列檢索功能(完整代碼)

    vue3 elementPlus 表格實現(xiàn)行列拖拽及列檢索功能(完整代碼)

    本文通過實例代碼給大家介紹vue3 elementPlus 表格實現(xiàn)行列拖拽及列檢索功能,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-10-10

最新評論