vue役割ドメインスロットslot-scopeの詳細

vueのスロット、すなわちslotは、コンポーネントのHTMLテンプレートであり、このテンプレートの表示は表示されず、親コンポーネントによってどのように表示されるかが決定されます.実際、slotの最も核心的な2つの問題はここで点が出てきて、表示しないこととどのように表示するかです.
vueを知っている学生は、スロットが単一のスロット、名前付きスロット、役割ドメインスロットに分かれていることを知っています.前の2つは簡単ですが、ここでは説明しません.今日のポイントは、役割ドメインスロットについて議論することです.
簡単に言えば、前の2つのスロットの内容とスタイルは親コンポーネントによって決定されます.つまり、どのような内容を表示するか、どのように表示するかは親コンポーネントによって決定されます.しかし、3つ目のスロットは異なり、役割ドメインスロットのスタイルは親コンポーネントによって決まり、内容はサブコンポーネントによって制御されます.簡単に言えば、最初の2つのスロットはデータをバインドできません.役割ドメインスロットはバインドデータ付きのスロットです.
Vue公式は2.6以降にスロットの書き方を変更したため、2.6以降の書き方と2.6以降の書き方を区別します.
まず2.6バージョンまでの書き方を見てみましょう.

//    



import child from './child';
export default {
  name: 'app',
  components: {
    child
  }
}

//   



export default {
  data () {
    return {
      items:['Webkit','Gecko','Trident','Blink']
    }
  }
}

バージョン2.6以降の書き方を見ると、サブアセンブリの書き方は変わらず、元とそっくりで、親アセンブリの書き方を見てみましょう.

//    



import child from './child';
export default {
  name: 'app',
  components: {
    child
  }
}

サブコンポーネントにスロットslotがv-bindで値itemをバインドし、親コンポーネントにサブコンポーネントchildを参照します.childラベルには、役割ドメインスロットtemplateが表示されます.このときslot-scopeは、サブコンポーネントのスロットslotにバインドされた値からなるオブジェクトです.たとえば、ここでslot-scope={item}ここのitemはサブコンポーネントから来ていますが、ここでslot-scopeの値はaなので、次の
ここまで言うと、役割ドメインスロットがわかっているのではないでしょうか.簡単に言えば、データをバインドできるスロットは、表示内容がサブコンポーネントによって完全に決定され、データはサブコンポーネントから来ています.
バインドデータが多すぎて、すべてを使用する必要がない場合はes 6のオブジェクト解体を使用することができます.オブジェクト解体については簡単ですが、筆者はここでは後述しません.