以前、匿名スロットと名前付きスロットについて学びました。
この問題での私たちのタスクは、スコープスロットです。
スコープスロットはあまり使用されていませんが、それでも非常に重要です。
スコープスロットは実際にはあまり使用されておらず、実際の要件でのみその意味を示すことができるため、実際の要件を使用してスコープスロットを示します。
要求する：
- やることリストコンポーネントが開発され、多くのモジュールが使用されています
- AB
- 以前のデータ形式と参照インターフェイスは変更されず、通常どおり表示されます
- 新しい汎用モジュールにチェックマークが追加されました
要件の説明は少し曖昧であり、ページのコンテンツを見ると何が起こっているのかがわかります。
<div id="app">
<App></App>
</div>
<script>
const todoList = {
data () {
return {
}
},
props: {
todos:Array,
defaultValue:[]
},
template:`
<ul>
<li v-for='item in todos' :key='item.id'>
<slot :itemValue = 'item' ></slot>
{
{item.title}}
</li>
</ul>
`
}
const App = {
data () {
return {
todoList:[{
title:'大哥你好么',
isComplate:true,
id:1
},{
title:'小弟我还行',
isComplate:false,
id:2
},{
title:'你在干什么',
isComplate:false,
id:3
},{
title:'抽烟喝酒烫头',
isComplate:true,
id:4
}]
}
},
components: {
todoList
},
template:`
<todoList :todos='todoList'>
<template v-slot='data'>
<label>{
{data}}</label>
<input type='checkbox' v-model='data.itemValue.isComplate' />
</template>
</todoList>
`
}
new Vue({
el:'#app',
data:{
},
components: {
App
}
});
</script>
まず、部分的なコンポーネントtodoListを作成しました。次に、より重要なのは小道具です。これについては、コンポーネント通信ですでに説明しました。次に、テンプレートテンプレートに、ulとliのv-forループが記述され、ループはpropsで取得されたtodosコレクションです。
以下のためのコンテンツリー、我々はまだ見スロットラベルスロットをし、その後に属性のスロットラベル、我々は書いた：itemValue =「アイテム」と、この事は、私たちは今の脇に置くだろう、と私たちは読書後にこのことについてお話します次のコンポーネント**：itemValue = 'item' **の役割。
また、Appの部分コンポーネントも作成しました。このコンポーネントのデータには、その時点でのページのコンテンツを表示するためのtodoList配列オブジェクトを作成しました。
todoListコンポーネントをcomponentsプロパティにマウントします。
テンプレートテンプレートの内容は非常に重要なので、それに焦点を当てる必要があります。
まず、todoListコンポーネントを呼び出し、コンポーネントのプロパティに：todos = 'todoList'と記述します。これは、コンポーネント間で値を伝達するために使用されます。理解できない場合は、前のコンテンツを読むことができます。：todos = 'todoList'は小道具に対応します：['todos']。この関数は、AppコンポーネントのtodoList配列オブジェクトをtodoListコンポーネントに渡すことです。
次に、todoListコンポーネント内に、スロット位置を占めるテンプレートタグを記述しました。これは、前面の名前付きスロットに似ています。上のテンプレートのラベル、V-スロット=「データ」をされても書かれて。多くの学生は、この何を知らないかもしれないデータがためです。そのため、このデータの内容をページに出力します。これは、学生がこのデータの内容を理解しやすくするためだけに、ニーズの実現とは関係ありません。
その後、データを表示するための入力タグがあります。
ページに何が表示されるかを見てみましょう。
我々が見ることができるオブジェクトのセットである最初のレンダリングこれは、コンテンツのデータにおけるV-スロット=「データ」。これは、前述のtodoListコンポーネントのitemValue of：itemValue = 'item'の由来です。これは修正されていません。名前は自由に変更できます。値に変更した後、ページのコンテンツも正常にレンダリングできます。
次に、ラジオボタンとデータ表示用のタイトルがあります。
これにより、他のラジオボタンに影響を与えることなく、指定したラジオボタンの内容を簡単に変更できます。つまり、スコープスロットの意味です。
これは実際にはあまり使用されていないため、理解するのは少し混乱するかもしれませんが、特定のビジネスシナリオでは非常に重要な役割を果たします。
Vueは無意味なコンテンツを生成しないことを覚えておく必要があります。それに関連するものには、対応するアプリケーションシナリオとその意味があり、そうでない場合は存在しません。これは、あらゆる優れたフレームワークに当てはまります。
WeChatミニプログラムコースのデザイン、完全なデザインのニーズがあります。個人のQQに連絡してください：505417246
次のWeChatパブリックアカウントに注意してください。WeChatアプレット、Vue、TypeScript、フロントエンド、ユニアプリ、フルスタック、Nodejs、Python、その他の実用的な学習資料を受け取ることができます。
最新かつ最も完全なフロントエンドの知識の概要とプロジェクトのソースコードは、できるだけ早くWeChatに公開されます。いいえ、ご注意ください。ありがとうございます。
