由于某些原因，我需要使用虛擬 DOM，這是我的代碼，
// test.js
import { h, ref } from 'vue'
const ButtonCounter = {
name: 'button-counter',
props: {
tag: {
type: String,
default: 'div'
}
},
setup (props) {
const sliderClass = ref('slider-slide')
return () => {
return h(props.tag, {
class: sliderClass.value
})
}
}
}
export { ButtonCounter }
<template>
<div>
<div id="components-demo">
<!-- putting <img>tag in virtual DOM -->
<button-counter tag="span"><img src="../assets/images/red.jpg" alt=""></button-counter>
</div>
</div>
</template>
<script>
import { ButtonCounter } from '../assets/js/test'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
export default {
name: 'TestView',
components: {
ButtonCounter,
Swiper,
SwiperSlide
},
setup () {
}
}
</script>
我希望<img src="../assets/images/red.jpg" alt="如何使用 h() 函式添加 innerhtml（或 innertext）？">被添加，<span ></span>但結果是，
https://i.stack.imgur.com/DR4Te.png
它沒有被添加。
我怎樣才能讓它作業？感謝您的幫助。
uj5u.com熱心網友回復：
h渲染函式不會自動只渲染范圍（即組件的內部/包裝部分），而無需您明確告訴它。
這個片段應該這樣做：
setup (props, { slots }) {
const sliderClass = ref('slider-slide');
return () => {
return h(props.tag, {
class: sliderClass.value
}, slots.default());
};
}
注意添加對 的呼叫slots.default()，作為children渲染函式的引數添加。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/480855.html
下一篇：如何在回圈內設定陣列的值？