使用中のVueのスロットスロット

　　スロットであるスロットは、HTMLテンプレートの構成要素である、このテンプレートが表示されず、どのように表示が親コンポーネントによって決定されます。実際には、二つの問題の核心にあるスロットは、ここではそれは、指摘して表示されていないとどのように表示します。

　　スロットは、テンプレートであるので、いずれかの成分のために、テンプレートポイントの種類の観点から、実際には、に分けることができるので、非テンプレートスロットとスロットテンプレート二つのカテゴリーに。

　　非スロットテンプレートは、HTMLテンプレート例えば「DIV、スパン、UL、テーブルとして、」これら、非テンプレートスロットと非表示と成分単独でどのように表示制御示します。

　　スロットテンプレートはスロットであり、それは最後のショーだと親コンポーネントによってHTMLテンプレートの表示制御の種類だけでなく隠すので、それは、空のシェルです。スロットディスプレイによって決定される位置は、独自のサブアセンブリ、どの位置コンポーネントテンプレートに記述されたスロットを有するが、鋳型の将来にわたる親コンポーネントのパスがどの位置に表示されます。

1スロット分

　　VUEは、コンテンツ配信API、コンテンツ配信などの要素ベアラ出口スロットのセットを実装します。

　　スロットは、HTML、およびその他のコンポーネントを含む任意のテンプレートコードを含めることができます。

　　あなたは、アセンブリ内のスロット要素を持っていないので、コンポーネント間で発生したものは、開始タグと終了タグが放棄された場合。

2、コンパイルスコープ

　　：ルールすべてのコンテンツのサブテンプレートのコンパイルは、サブドメインのアクションであり、すべてのコンテンツの親テンプレートは、ドメインのコンパイルにおける親の役割です。

3、バックアップコンテンツ

　　時には、特定の引当金を設定したスロット（つまり、デフォルトで）コンテンツが有用である、それは一度にレンダリングされるコンテンツを提供していませんでした。

　　これは単にデフォルト値の概念です。<slot>Submit</slot>

4、名前付きスロット

　　複数のスロット、必要に応じて、スロット要素は特別な性質を有する：名前、追加のスロットを定義するために使用されます。なしA エクスポートが名「デフォルト」と表示されません。name<slot>

　　名前のスロットにコンテンツを提供する場合、我々は1ができる<template>の要素を使用v-slot命令を、とするv-slot仮パラメータの名前を提供します。

<テンプレートV-スロット：フッター> 
  <P>ここで" sのいくつかの連絡先</ P> 
</テンプレート>

　　今、<template>すべてのコンテンツ要素が適切なスロットに渡される必要があります。どんなで包まれていないv-slotの<template>コンテンツのデフォルトのスロットの内容がなるとみなされます。

　　注：vスロットのみで添加することができる（1つの例外を除いて）には、スロット廃止特性を有するあります<template>

5.スコープスロット

<現在のユーザー> 
  {{user.firstName}} 
</現在のユーザ>

　　唯一のためのコードは、動作しません<current-user>コンポーネントがアクセスすることができますuserし、私たちが提供するコンテンツは、親のレンダリングです。ようにするにはuser、親のスロット利用可能なコンテンツを、我々はできるuserよう<slot>、最大の特徴要素を結合します：

<スパン>
   <スロットvバインド：ユーザー= " ユーザ"> {{user.lastName}} </スロット> </スパン>

　　結合<slot>素子特性には呼び出されたスロットプロップ。今、親スコープに、私たちは与えることができv-slot、我々が提供するスロット小道具の名前を定義するための値で：

<現在のユーザー>
   <テンプレートVスロット：デフォルト= " slotProps "> {{slotProps.user.firstName}} </テンプレート> </現在のユーザ>

　　私たちはすることにしたスロット小道具という名前のすべてのオブジェクトが含まれslotPropsていますが、好きな名前を使用することができます。

　　（1）専用スロットデフォルトの略語：

　　コンテンツが提供される場合にのみときに、デフォルトのスロット、ラベル・コンポーネントは、テンプレートスロットとして使用することができます。我々は置くことができるように、v-slot例外の上に言われているコンポーネント、上で直接

<current-user v-slot:default="slotProps"> {{ slotProps.user.firstName }} </current-user>

　　注意：只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法

　　（2）解构插槽：

　　作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里，这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式，所以可以利用ES6的解构来传入参数

<current-user v-slot="{ user: person }">
  {{ person.firstName }}
</current-user>

　　解构：v-slot="{ user }"

　　重命名：v-slot="{ user: person }"

　　定义默认值：v-slot="{ user = { firstName: 'Guest' } }"

6、动态插槽名

　　<template v-slot:[dynamicSlotName]> ... </template>

7、缩写

　　v-slot:header 可以被重写为 #header

8、其他示例

　　主要来自官网学习整理：https://cn.vuejs.org/v2/guide/components-slots.html

使用中のVueのスロットスロット

おすすめ