[Vuejs]-How can I specify the location of child components in the DOM?

by

2👍

Vue supports this using content distribution with slots. You can use the <slot> element to mark slots within your template where children are to be rendered. You can also use named slots to have multiple different targets within your template.

Using slots is pretty simple:

Vue.component('my-wrapper', {
  template: `
    <div>
      <div class="box left">
        <slot name="left"></slot>
      </div>
      <div class="box right">
        <slot name="right"></slot>
      </div>
      <div class="after">
        <slot>
          This is some default content
        </slot>
      </div>
    </div>
  `
});

var app = new Vue({
  el: '#app',
});
.box {
  width: calc(50% - 10px);
  border: 1px solid blue;
  min-height: 20px;
  margin: 4px;
}
.box.left {
  float: left;
}
.box.right {
  float: right;
}
.after {
  clear: both;
}

#app > div {
  border-bottom: 1px solid #CCC;
  margin-bottom: 10px;
}
<div id="app">
  <!-- This on just displays the default content -->
  <my-wrapper></my-wrapper>
  
  <!-- Here, the default content is overwritten -->
  <my-wrapper>
    Hello world!
  </my-wrapper>
  
  <!-- Left slot and overwriting the unnamed slot -->
  <my-wrapper>
    <template slot="left">Some left content</template>
    And overwriting the default
  </my-wrapper>

  <!-- Right slot, but keeping the default content -->
  <my-wrapper>
    <template slot="right">Just right content</template>
  </my-wrapper>
  
  <!-- All combined. We don’t have to use the template element -->
  <my-wrapper>
    <div slot="left">Some logo</div>
    <ul slot="right">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <p>This is some new content</p>
  </my-wrapper>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
👤poke

1👍

Quick example:

<template id="my-wrapper">
  <div>
    <div class="left">
      <slot name="left"></slot>
    </div>
    <div class="right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

And usage:

<template>
  <my-wrapper>
    <card slot="left" :data="card1"></card>
    <card slot="right" :data="card2"></card>
  </my-wrapper>
</template>
👤user6748331

Leave a comment