Vueノート：スロットの使用

スロット

• コンポーネントのスロットは、カプセル化するコンポーネントをよりスケーラブルにすることです
• ユーザーがコンポーネントに何を表示するかを決定できるようにする
• ソケットをカプセル化する方法：共通点を抽出して違いを保つ
• カプセル化する最良の方法は、共通点をコンポーネントに抽出し、違いをスロットとして公開することです
• スロットが予約されると、ユーザーは必要に応じてスロットに何を挿入するかを決定できます
• スロットの役割は、親コンポーネントのコンテンツと子コンポーネント自体のテンプレートを混合することです

<div id='father'>
  <h1>{
   
   { name }}</h1>
  <son></son>
</div>

<template id='son'>
  <div>
    <h1>{
   
   { name }}</h1>
  </div>
<template>

const son = {
    
    
  template:'#son',
  data() {
    
    
    return {
    
    
      name:'我是儿子'
    }
  }
}

const father = new Vue({
    
    
  el:"#father",
  data:{
    
    
    name:'我是爹'
  },
  components:{
    
     son }
})

ページに印刷してご覧ください。

父と息子の両方が外出しています。

息子を使うときはこんな感じ

<div id='father'>
  <!-- 省略 -->
  <son></son>
</div>

ただし、このように記述した場合、このテキストの文字列は表示されますか？

<son>插槽要来了插槽要来了</son>

印刷する

• 実際、表示できない理由は、ページがレンダリングされるときに、使用されているsonタグが子コンポーネント、つまりテンプレートタグに置き換わるため、テキストの文字列が表示されないこともわかっています。

• これは明らかにコンポーネントの再利用性の概念に適合していません

• 恐れることはありません、姉妹のエントリーはそれを行う方法を教えてくれます

• それは実際には非常に簡単です、これを行う必要があるだけです

  <template id="son">
    <div>
      <h1>{
   
   { name }}</h1>
      <slot></slot>
    </div>
  </template>

• スロットタグを追加した後、テキストの文字列を表示できます
• 学ぶことを愛する兄弟は、NetEase Youdao辞書を開いたに違いありません。実際、スロットという用語は場所を意味し、スロットは

ページに印刷して確認してください

名前付きスロット

• 名前が示すとおり、これは名前の付いたスロットです

• 上記のコードで、サブコンポーネントに3つのスロットを定義すると、テキストの文字列はどこに挿入されますか？

• 最初にテキストの文字列をpタグでラップします

<div di='father'>
  //...
  <son><p>插槽要来了</p></son>
</div>

<template id="son">
  <div>
    <h1>{
   
   { name }}</h1>
    <slot></slot>
    <slot></slot>
    <slot></slot>
  </div>
</template>

練習は真実をテストするための唯一の基準です。私たちはそれをページに印刷して確認します

• 息子のラベルには3つのスロットがありますが、プラグ（pラベル）は1つだけ提供されています。
• このプラグはすべてのソケットに差し込みます
• 私達はまた彼に3つのプラグを与えます

<div id="father">
  <h1>{
   
   { name }}</h1>
  <son>
    <p>我是下面的白熊</p>
    <p>我是上面的棕熊</p>
    <p>我是中间的熊猫</p>
  </son>
</div>

妹のエンターはベアベアが好きです。ところでアムウェイをあげます。
ページに印刷して確認してください

• これらの3つのpタグが3回再利用されていることがわかります
• では、この状況を回避して3つのクマを順番に積み重ねるにはどうすればよいでしょうか。
• 現時点では、名前付きスロットを使用できます

  <div id="father">
    <h1>{
   
   { name }}</h1>
    <son>
      <p slot='bottom'>我是下面的白熊</p>
      <p slot="top">我是上面的棕熊</p>
      <p slot="center">我是中间的熊猫</p>
    </son>
  </div>

  <template id="son">
    <div>
      <h1>{
   
   { name }}</h1>
      <slot name='top'></slot>
      <slot name='center'></slot>
      <slot name='bottom'></slot>
    </div>
  </template>

• 息子コンポーネントのスロットスロットに名前属性を追加します
• 親コンポーネントが使用するラベルにスロット属性を追加します
• 2つの属性が同じ場合、対応するスロットに挿入されます

ページ効果を見てください

スロットのデフォルトラベル

• 名前付きスロットを使用する場合、デフォルトのラベルを設定することもできます
• たとえば、底スロットにデフォルト値を設定しますボタンボタン
• このスロットに誰も差し込まれていない場合、ボタン現れる
• このように書くことができます

<!-- <p slot='bottom'>我是下面的白熊</p> -->

<slot name='bottom'><button>按钮</button></slot>

ページ効果を見てください

スロットのデータはどこにありますか

• コンポーネントで変数を使用する場合、最初に変数がどのテンプレートにあるかを調べ、対応するテンプレートのVueインスタンスで変数を使用します

シロクマを追いかけましょう一つに

<p slot='bottom'>我是下面的白熊{
   
   { num }}</p>

に息子コンポーネント設定する一つに値は50

const son = {
    
    
  template:"#son",
  data() {
    
    
    return {
    
    
    name:'我是儿子',
    num:50
    }
  }
}

にパパコンポーネント設定する一つに値は10

const father = new Vue({
    
    
  el:'#father',
  data:{
    
    
    name:'我是爹',
    num:10
  },
  components:{
    
     son }
})

それで問題は、シロクマが使用する数ですか？
ページに印刷して確認してください

息子に自分のデータを使用させるには？

クリックして表示