Tìm hiểu các khe cắm thành phần với Vue.js

---

Thông thường, bạn cần cho phép các thành phần Vue mẹ của bạn nhúng nội dung tùy ý vào bên trong các thành phần con. (Các nhà phát triển góc cạnh, bạn biết điều này như là chuyển đổi hoặc chiếu nội dung .) Vue cung cấp một cách dễ dàng để thực hiện điều này thông qua các khe .

Cách sử dụng cơ bản

Để cho phép một thành phần mẹ truyền các phần tử DOM vào một thành phần con, hãy cung cấp một phần tử <slot></slot> bên trong thành phần con. Sau đó, bạn có thể điền các phần tử vào vị trí đó bằng <child-component><p>MyParagraph</p></child-component> .

<template>
  <div>
    <p>I'm the child component!</p>
    <!-- Content from the parent gets rendered here. -->
    <slot></slot>
  </div>
</template>

<template>
  <div>
    <child-component>
      <p>I'm injected content from the parent!</p>
      <p>I can still bind to data in the parent's scope, like this! {{myVariable}}</p>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },

  data() {
    return {
      myVariable: `I'm just a lonely old variable.`
    }
  }
}
</script>

Lưu ý: Nếu không có phần tử <slot> </slot> trong mẫu của trẻ, thì bất kỳ nội dung nào từ phần tử root sẽ bị loại bỏ một cách âm thầm.

Nội dung dự phòng

Nếu cha mẹ không đưa bất kỳ nội dung nào vào vị trí của trẻ, trẻ sẽ hiển thị bất kỳ phần tử nào bên trong <slot></slot> , như sau:

<template>
  <div>
    <slot>
      <p>Hello from the child!</p>
    </slot>
  </div>
</template>

<template>
  <div>
    <!-- Renders "Hello from the parent!" -->
    <child-component>
      <p>Hello from the parent!</p>
    </child-component>
    <!-- Renders "Hello from the child!" -->
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

Slots được đặt tên

Có một nơi để đưa nội dung vào là tốt và tất cả, nhưng đôi khi sẽ tốt hơn nếu có thể đưa nhiều loại nội dung khác nhau vào các vị trí khác nhau trong thành phần con. Giả sử bạn đang làm một thành phần bánh mì kẹp thịt. Bạn muốn bánh trên và dưới có thể đoán trước được ở trên cùng và dưới cùng của bánh mì kẹp thịt, (phải không?) Nhưng cũng muốn có thể trải mọi thứ lên các nửa bánh.

Vue cho phép ta làm điều này bằng cách đặt tên cho các vị trí . Các vị trí được đặt tên chỉ đơn giản là các vị trí có thuộc tính tên <slot name="slotName"></slot> để cho phép đưa vào nội dung không gian tên.

<template>
  <div class="burger-component">
    <!-- Elements injected with the `slot="top-bun"`
    attribute will end up in here. -->
    <slot name="top-bun">
    </slot>
    <!-- A slot tag without a name is a catch-all,
    it will contain any content that doesn't have
    a `slot=""` attribute. -->
    <slot>
    </slot>
    <!-- Elements injected with the `slot="top-bun"`
    attribute will end up in here. -->
    <slot name="bottom-bun">
    </slot>
  </div>
</template>

<template>
  <!-- TOP SECRET, FOR EMPLOYEE EYES ONLY -->
  <burger-component>
    <burger-bun slot="top-bun">
      <sesame-seeds></sesame-seeds>
      <mayonaise></mayonaise>
    </burger-bun>
    <burger-bun slot="bottom-bun" :toasted="true">
      <secret-sauce></secret-sauce> 
    </burger-bun>
    <!-- Everything else gets injected into the middle slot (as it's not named.) -->
    <pickles></pickles>
    <lettuce></lettuce>
    <bacon></bacon>
    <beef-patty></beef-patty>
    <cheese-slice></cheese-slice>
  </burger-component>
</template>

<script>
import BurgerComponent from './BurgerComponent.vue';
import {
  BurgerBun,
  SesameSeeds,
  Mayonaise,
  SecretSauce,
  Pickles,
  Lettuce,
  Bacon,
  BeefPatty,
  CheeseSlice
} as Ingredients from './ingredients';

export default {
  components: {
    BurgerComponent,
    ...Ingredients
  },

  data() {
    return {
      price: "priceless"
    }
  }
}
</script>

Rõ ràng là tôi không có manh mối về cách làm bánh mì kẹp thịt, nhưng điều đó ít nhất sẽ là một hướng dẫn dễ hiểu về các khe cắm Vue. Thưởng thức!

---

---

Các tin liên quan