javascript - Vue v-html 渲染 [object HTMLQuoteElement]

Question

我正在尝试使用插槽创建通用幻灯片组件。我能够访问传递到插槽中的元素，当我记录它们时，它们似乎是 DOM 元素，但当它们出现在页面上时，它们只是[object HTMLQuoteElement].

这是组件：

<template>
  <div :class="cssClasses">
    <div v-show="false">
      <slot></slot>
    </div>
    <transition v-if="slots.length" name="carousel-fade" tag="div">
      <div v-html="currentSlide"></div>
    </transition>
  </div>
</template>

<script>
  export default {
    props: {
      // Classes to apply to wrapping element.
      cssClasses:  { default: '' },
      // Integer for miliseconds to remain on each slide.
      interval:    { default: 5000 }
    },

    data() {
      return {
        // Internal: Timer for playing through slides.
        timer: null,
        // Internal: Current slide.
        index: 0
      }
    },

    computed: {
      currentSlide() {
        if (this.$slots.default[this.index].elm) {
          console.log('currentSlide', this.$slots.default[this.index].elm) // prints correctly

          return this.$slots.default[this.index].elm // renders wrong
        }
        return ''
      },

      slots() {
        return this.$slots.default
      }
    },

    methods: {
      // Internal: Start slideshow.
      startSlide() {
        if (this.timer) clearInterval(this.timer)

        this.timer = setInterval(this.next, this.interval)
      },

      // Internal: Render next slide. If at end, return to the beginning.
      next() {
        this.startSlide()

        if (this.index === this.slots.length - 1) {
          this.index = 0
        } else {
          this.index += 1
        }
      }

    },

    mounted() {
      this.startSlide()
    }
  }
</script>

目标是能够将任何 html 元素传递到插槽中，以便幻灯片通过它们。此时我只是添加无意义的文本，因为堆栈溢出不会让我发布我的问题，因为它主要是代码。但其实，也没什么好说的了。你可以阅读代码。你知道我想要做什么。如果我做错了什么，请告诉我。我没有必要浪费我们俩的时间，所以机器人可以计算字符来决定一个人是否有足够的信息。

标签： javascriptvue.js