Por alguna razón, necesito usar DOM virtual y aquí está mi código,
// 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> Esperaba que se agregara <img src="../assets/images/red.jpg" alt=""> en <span class="slider-slide"></span> pero el resultado fue https:// i.stack.imgur.com/DR4Te.png no se agregó.
¿Cómo puedo hacer que funcione? Gracias por tu ayuda.
La función de representación h no representa automáticamente el alcance (es decir, la parte interna/envuelta del componente) sin que usted se lo indique explícitamente.
Este fragmento debería hacerlo:
setup (props, { slots }) { const sliderClass = ref('slider-slide'); return () => { return h(props.tag, { class: sliderClass.value }, slots.default()); }; } Tenga en cuenta la adición de la llamada a slots.default() , agregada como parámetro children para la función de representación.