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

Posted 2023-02-16

【中文标题】使用插槽移动传递到组件中的元素

【英文标题】：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 - 感谢您的建议。

【参考方案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。