Question

我刚刚开始使用VueJS，我试图移植一个简单的jQuery读取更多的插件。

除了我不知道如何访问slot的内容之外，我已经完成了所有工作。我想要做的是将传递到slot的一些元素移到div.readmore__wrapper的正上方。

这可以简单地在模板中完成，还是我必须以其他方式完成？

到目前为止，这是我的组件......

<template>
    <div class="readmore">

        <!-- SOME ELEMENTS PASSED TO SLOT TO GO HERE! -->

        <div class="readmore__wrapper" :class="{ 'active': open }">
            <slot></slot>
        </div>
        <a href="#!" @click.prevent="toggle" class="readmore__button">Read {{ open ? lessLabel : moreLabel }}</a>
    </div>
</template>
<script>
    export default {
        name: 'read-more',
        data() {
            return {
                open: false,
                moreLabel: 'more',
                lessLabel: 'less'
            };
        },
        methods: {
            toggle() {
                this.open = !this.open;
            }
        },
    }
</script>

Answer 1

你当然可以做你所描述的。在组件中操作DOM通常在mounted hook中完成。如果您希望在某个时刻更新插槽的内容，您可能需要在updated hook中执行相同的操作，尽管在使用它时，只需进行一些内插内容更改就不需要它。 / p>

new Vue({
  el: '#app',
  components: {
    readMore: {
      template: '#read-more-template',
      data() {
        return {
          open: false,
          moreLabel: 'more',
          lessLabel: 'less'
        };
      },
      methods: {
        toggle() {
          this.open = !this.open;
        }
      },
      mounted() {
        const readmoreEl = this.$el.querySelector('.readmore__wrapper');
        const firstEl = readmoreEl.querySelector('*');
        
        this.$el.insertBefore(firstEl, readmoreEl);
      }
    }
  }
});

.readmore__wrapper {
  display: none;
}

.readmore__wrapper.active {
  display: block;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id='app'>
  Hi there.
  <read-more>
    <div>First div inside</div>
    <div>Another div of content</div>
  </read-more>
</div>
<template id="read-more-template">
    <div class="readmore">

        <!-- SOME ELEMENTS PASSED TO SLOT TO GO HERE! -->

        <div class="readmore__wrapper" :class="{ 'active': open }">
            <slot></slot>
        </div>
        <a href="#!" @click.prevent="toggle" class="readmore__button">Read {{ open ? lessLabel : moreLabel }}</a>
    </div>
</template>

使用插槽移动传递到组件的元素

1 个答案: