VUEコンポーネント開発の-slot

vueスロットの実装は3つに分類されます

slot-単一スロット

slot-name-名前付きスロット

slot-scope-アクティブドメインスロット

公式サイトの幅が多すぎるため、ここでは簡単な説明しかしていません.早く理解してほしいです.まず、単一スロット-slotを分析します.
slot

コンポーネント開発では、多くのビジネスに溶け込むべきではありません.そのため、拡張性が強く、簡潔なコードを備えているはずです.そのため、開発プロセスでは、簡単に1つのコンポーネントにslotラベルを入れます.以下のようにします.

<template>
  <div class="container">
    <header>helloheader>
    <slot>      ，               slot>
  div>
template>

親コンポーネントでの使用

<hello>
  <h1>I’am sloth1>
hello>

これは簡単な例ですが、次に具名スロットを分析し、両者の違いを紹介します.
slot-name

のすべての名前付きスロットは、単一スロットの拡張性に一定の制限があるためだと思います.そのため、slotごとにname属性を定義し、親コンポーネントが同じ名前のslotに一致するようにするときに、対応する位置を置くと、コンポーネント開発の構想が明確になります.以下のようにします.

<template>
   <div class="container">
     <header>helloheader>
     <main>
       <slot name="main">slot>
     main>
     <footer>
       <slot name="footer">slot>
     footer>		
   div>
template>

親コンポーネントでの使用

<hello>
  <p slot="main">I’am mainp>
  <h1 slot="footer">I’am footerh1>
hello>

名前付きスロットの出現は単一スロットの使用制限を破り、より拡張性の高いコンポーネントインタフェースを実現し、次に役割ドメインスロットの分析を開始します.この部分は入門したばかりの人にとって他の2つの方法に比べて理解しにくいです.少なくとも半年前にvueを習い始めたばかりのときはそうでした.だから分からないならもっとプロジェクトをしてvueのプロジェクトの経験を増やして振り返ると、もっと理解しやすいかもしれません.
slot-scope

役割ドメインスロットは、その名の通り、コンポーネント役割ドメインにおいて、異なる待機コンテンツとは独立して異なる出力を行うことができる、例えば、

.

<template>
  <ul>
    <li v-for="todo in todos" v-key="{{todo.id}}">
      <slot :todo="todo">
        {{todo.text}}
      slot>
    li>
  ul>
template>

親コンポーネント参照

<hello :todos="todos">
  <template slot-scope="scope">
    <span v-if="scope.todo.id == 2">
      {{scope.todo.id}}
    span>
  template>
hello>

2.5.0+はtemplate要素を制限しないで、この例では、保留中のidが2の場合、textではなくid値を出力します.