Phần tử Vue <slot>

Ví dụ

Sử dụng phần tử <slot> tích hợp để đặt nội dung từ thành phần cha mẹ vào <template> của thành phần con.

 <template>
  <div>  
    <p>SlotComp.vue</p>
    <slot></slot>
  </div>
</template>

ví dụ 1

Sử dụng các vị trí để bao quanh các khối nội dung HTML động lớn hơn để có giao diện giống như thẻ.

App.vue :

 <template>
  <h3>Slots in Vue</h3>  
  <p>We create card-like div boxes from the foods array.</p>
  <div id="wrapper">
    <slot-comp v-for="x in foods">
      <img v-bind:src="x.url">
      <h4>{{x.name}}</h4>
      <p>{{x.desc}}</p>
    </slot-comp>
  </div>
</template>

Khi nội dung đi vào thành phần có <slot> , chúng tôi sử dụng div xung quanh <slot> và tạo kiểu cục bộ cho <div> để tạo giao diện giống như thẻ xung quanh nội dung mà không ảnh hưởng đến các div khác trong ứng dụng của chúng tôi.

SlotComp.vue :

 <template>
  <div> <!-- This div makes the card-like appearance -->
    <slot></slot>
  </div>
</template>

<script></script>

<style scoped>
  div {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: 10px;
    margin: 10px;
  }
</style>

Ví dụ 2

Sử dụng một khe để tạo chân trang.

App.vue :

 <template>
  <h3>Reusable Slot Cards</h3>
  <p>We create card-like div boxes from the foods array.</p>
  <p>We also create a card-like footer by reusing the same component.</p>
  <div id="wrapper">
    <slot-comp v-for="x in foods">
      <img v-bind:src="x.url">
      <h4>{{x.name}}</h4>
    </slot-comp>
  </div>
  <footer>
    <slot-comp>
      <h4>Footer</h4>
    </slot-comp>
  </footer>
</template>

Ví dụ 3

Sử dụng tên vị trí, nội dung có thể được gửi đến một vị trí cụ thể.

SlotComp.vue :

 <h3>Component</h3>
<div>
  <slot name="topSlot" ></slot>
</div>
<div>
  <slot name="bottomSlot" ></slot>
</div>

App.vue :

 <h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:bottomSlot >'Hello!'</slot-comp>

Ví dụ 4

Với hai vị trí trong một thành phần, nội dung được gửi đến thành phần đó sẽ xuất hiện ở cả hai vị trí.

App.vue :

 <h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>'Hello!'</slot-comp>

SlotComp.vue :

 <h3>Component</h3>
<div>
  <slot></slot>
</div>
<div>
  <slot></slot>
</div>

Ví dụ 5

Sử dụng nội dung dự phòng trong một vùng để nội dung nào đó được hiển thị khi không có nội dung nào được cung cấp từ cấp độ gốc.

App.vue :

 <template>
  <h3>Slots Fallback Content</h3>
  <p>A component without content provided can have fallback content in the slot tag.</p>
  <slot-comp>
    <!-- Empty -->
  </slot-comp>
  <slot-comp>
    <h4>This content is provided from App.vue</h4>
  </slot-comp>
</template>

SlotComp.vue :

 <template>
  <div>
    <slot>
      <h4>This is fallback content</h4>
    </slot>
  </div>
</template>

Ví dụ 6

Vị trí không có tên sẽ là vị trí mặc định cho nội dung từ cấp độ gốc.

SlotComp.vue :

 <h3>Component</h3>
<div>
  <slot></slot>
</div>
<div>
  <slot name="bottomSlot"></slot>
</div>

App.vue :

 <h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>'Hello!'</slot-comp>

Ví dụ 7

Sử dụng v-slot:default để xác định rõ ràng một vị trí là vị trí mặc định.

SlotComp.vue :

 <h3>Component</h3>
<div>
  <slot></slot>
</div>
<div>
  <slot name="bottomSlot"></slot>
</div>

App.vue :

 <h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp v-slot:default >'Default slot'</slot-comp>

Ví dụ 8

Vị trí có phạm vi: Sử dụng giá trị 'foodName' trong vị trí để truyền đạt tên thực phẩm cho phụ huynh.

SlotComp.vue :

 <template>
  <slot
    v-for="x in foods"
    :key="x"
    :foodName="x"
  ></slot>
</template>

<script>
  export default {
    data() {
      return {
        foods: ['Apple','Pizza','Rice','Fish','Cake']
      }
    }
  }
</script>

App.vue :

 <slot-comp v-slot="food" >
  <h2>{{ food.foodName }}</h2>
</slot-comp>

Ví dụ 9

Vị trí có phạm vi: Sử dụng đạo cụ trong vị trí để truyền đạt một số thứ cho cấp độ gốc, dựa trên một mảng có các đối tượng.

SlotComp.vue :

 <template>
  <slot
    v-for="x in foods"
    :key="x.name"
    :foodName="x.name"
    :foodDesc="x.desc"
    :foodUrl="x.url"
  ></slot>
</template>

<script>
  export default {
    data() {
      return {
        foods: [
          { name: 'Apple', desc: 'Apples are a type of fruit that grow on trees.', url: 'img_apple.svg' },
          { name: 'Pizza', desc: 'Pizza has a bread base with tomato sauce, cheese, and toppings on top.', url: 'img_pizza.svg' },
          { name: 'Rice', desc: 'Rice is a type of grain that people like to eat.', url: 'img_rice.svg' },
          { name: 'Fish', desc: 'Fish is an animal that lives in water.', url: 'img_fish.svg' },
          { name: 'Cake', desc: 'Cake is something sweet that tastes good but is not considered healthy.', url: 'img_cake.svg' }
       ]
      }
    }
  }
</script>

App.vue :

 <slot-comp v-slot="food">
  <hr>
  <h2>{{ food.foodName }}<img :src= food.foodUrl ></h2>
  <p>{{ food.foodDesc }}</p>
</slot-comp>

Ví dụ 10

Sử dụng các vị trí có phạm vi được đặt tên để đặt một văn bản vào "leftSlot" và một văn bản khác vào "rightSlot".

SlotComp.vue :

 <template>
  <slot
    name="leftSlot"
    :text="leftText"
  ></slot>
  <slot
    name="rightSlot"
    :text="rightText"
  ></slot>
</template>

<script>
  export default {
    data() {
      return {
        leftText: 'This text belongs to the LEFT slot.',
        rightText: 'This text belongs to the RIGHT slot.'
      }
    }
  }
</script>

App.vue :

 <slot-comp #leftSlot="leftProps">
  <div>{{ leftProps.text }}</div>
</slot-comp>
<slot-comp #rightSlot="rightProps">
  <div>{{ rightProps.text }}</div>
</slot-comp>