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

【问题标题】：Move elements passed into a component using a slot使用插槽移动传递到组件中的元素
【发布时间】：2018-04-27 02:40:40
【问题描述】：

我刚开始使用 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>

【问题讨论】：

使用命名槽？
@WaldemarIce - 我无法控制将哪些元素传递给插槽，因此在将它们传递给组件之前我无法将它们分解。他们将来自 CMS。我只说第一个元素是为了让示例保持简单，稍后可以对其进行配置。我已经更新了问题，使其不再关注第一个元素。
@WaldemarIce - 感谢您的建议。

标签： vue.js vuejs2

【解决方案1】：

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

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>

【讨论】：

这正是我所追求的，非常感谢。这是我一直在努力争取的this.$el。