如何使用 h() 函数添加 innerhtml（或 innertext）？

Question

出于某些原因，我需要使用虚拟 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>

我希望在 <span class="slider-slide"></span> 中添加 <img src="../assets/images/red.jpg" alt="">，但结果是， https://i.stack.imgur.com/DR4Te.png 没有添加。

我怎样才能让它发挥作用？感谢您的帮助。

Answer 1

h 渲染函数不会自动渲染作用域（即组件的 inner/wrapped 部分），而无需您明确告知。

这段代码应该可以做到：

setup (props, { slots }) {
  const sliderClass = ref('slider-slide');
  return () => {
    return h(props.tag, {
      class: sliderClass.value
    }, slots.default());
  };
}

注意添加对 slots.default() 的调用，添加为渲染函数的 children 参数。

如何使用 h() 函数添加 innerhtml（或 innertext）？

how can I add innerhtml(or innertext) using h() function?

javascript

vue.js

vuejs3