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元素传递到插槽中，以便幻灯片可以通过它们。在这一点上，我只是添加无意义的文本，因为堆栈溢出不会让我发布问题，因为它主要是代码。但实际上，没有更多要说的了。您可以阅读代码。你知道我想做什么。如果我做错了，请告诉我。我没有意义的是浪费我们的两个时间，所以机器人可以计算字符来确定一个人有足够的信息。

Vue v-html渲染[object HTMLQuoteElement]

0 个答案: