三種類に分けスロットスロットヴュー、
- 匿名スロット
- 名前付きスロット
- スコープスロット
スコープ寛大なコンセプトスロットが、ドキュメントの説明のみ
時にはあなたは、サブアセンブリから再利用可能なスロットが利用可能なデータを提供するコンポーネントをしたいです。
以下は、最初の2つのコンポーネントは何かを説明し、2つの父と息子VUEのコンポーネントです
- 親コンポーネントは、サブアセンブリと呼ばれているだけ
- 内部サブコンポーネント実装todolistのリスト
私は、データの流れの観点から、使用スロットの範囲を理解するためにことを示唆しています
- 1.親コンポーネントは、アレイサブアセンブリドスに渡されます。
- 2副成分は、小道具を介してデータの配列を受け取り、問題はないはずです
- 3.サブアセンブリリストをレンダリングV-の配列を取得し、によって<スロット：TODO =「TODO」>よう、親コンポーネントに渡された配列のTODO内のオブジェクトの各
- スロットスコープ=「slotProps」方式によって前記親コンポーネント、TODO受信オブジェクトは、slotProps.todo.xxxの方法で使用することができます
データの流れを経験したので、
- アレイドスを渡す親コンポーネントサブアセンブリ
- 親成分TODOにオブジェクトを渡すトドストラバーサルサブアセンブリアレイ、
すべてのコード：
あるソース親コンポーネント、呼び出し側
<template>
<todo-list :todos="todos">
<template slot-scope="slotProps">
<span v-if="slotProps.todo.isComplete">✓</span>
<span>{{slotProps.todo.text}}</span>
</template>
</todo-list>
</template>
<script>
import todoList from './todoList'
export default {
data () {
return {
todos: [
{
id: 0,
text: 'ziwei0',
isComplete: false
},
{
text: 'ziwei1',
id: 1,
isComplete: true
},
{
text: 'ziwei2',
id: 2,
isComplete: false
},
{
text: 'ziwei3',
id: 3,
isComplete: false
}
]
}
},
components: {
todoList
},
}
</script>ソースサブアセンブリ、すなわち人々がアセンブリパッケージ
<template>
<ul>
<li v-for="todo in todos" :key="todo.id">
<slot :todo="todo">
</slot>
</li>
</ul>
</template>
<script>
export default {
props: {
todos: {
type: Array
}
}
}
</script>サブコンポーネントを返すわけではありません。データは、最初のサブアセンブリではないため、最終的なアセンブリは、親コンポーネントへのデータバックの父であります..
あなたのデータは、このシナリオの下で、あなたの最初の親コンポーネントであるサブコンポーネント一般的なフレームワークコンポーネントの要素-UIの種類に似ています。
IsComplete値の変化は、一般に、親コンポーネントの変化に配置されます。要素-UI一般的にビジネスデータへの変更のための責任を負いません、それは、このようなTODOをクリックすると、右の時点で、あなたがレンダリング支援するための唯一の責任がある、あなたに返されるデータは、このコンポーネントの呼び出し側がデータを変更することができます。
