Vue2.6スロットアップデートvスロットの使用状況の概要
2.6.0では、名前付きスロットとスコープ付きスロットに新しい統合構文（v-slot命令）を導入しました。これは、現在非推奨ですが削除されておらず、ドキュメントに残っているスロットとスロットスコープを置き換えます。
スロット
私の理解では、
親ページはコンポーネントラベルにコンテンツを挿入し、サブコンポーネントは配置を制御するためにスロットを挿入します
（匿名スロット、名前付きスロット）
スロットの分類スロットに
は3つのカテゴリがあり
ます。1。匿名スロット（デフォルトスロットとも呼ばれます）：名前なし、1つだけ
2.名前付きスロット：名前付きの比較的匿名のスロットコンポーネントスロットラベル
3.機能ドメインスロット：データ子コンポーネントでは、親ページで取得できます（データは親ページから子コンポーネントにのみ渡すことができるように解決されました）
匿名スロット（デフォルトスロットデフォルトとも呼ばれます）の
使用法：私が理解しているように、必要な匿名スロットは1つだけです（それだけで、それほど複雑ではありません）
親ページ：
<todo-list>
<template v-slot:default>
任意内容
<p>我是匿名插槽 </p>
</template>
</todo-list>
// v-slot：defaultは名前付きの記述とより統一されており、理解しやすく、
サブコンポーネントtodoList.vueを記述する必要はありません。
<slot>我是默认值</slot>
##適用##
//任意のコンテンツ
//私は
slot（name）という名前の匿名スロットです
使用法：私の理解では、匿名スロットと比較して、対応するtodoという名前を付ける必要があり、複数の名前付きスロットが存在する可能性があります。（いいえ〜）
親ページ
<todo-list>
<template v-slot:todo>
任意内容
<p>我是匿名插槽 </p>
</template>
</todo-list>
// todo
data() {
return {
dynamicSlotName:"todo"
}
},
サブアセンブリ
<slot name="todo">我是默认值</slot>
##コード##
//任意のコンテンツ
//私は匿名スロットです
v-slot：todoの操作：
動的命名
v-slot：（dynamicSlotName）//ラベルのv-slot：todo
名前付きスロットの省略形を置き換えます（匿名スロットの使用法）（後で確認できます）
#todo
使用する場合はv-slot：todonanonymousを置き換えますそれを追加する必要がありますデフォルトでは
#default置換タグv-slot：todo
親テンプレートのすべてのコンテンツは親スコープでコンパイルされます。子テンプレートのすべてのコンテンツは子スコープでコンパイルされます。
スコープスロット
1。重要な点は、slotPropsがサブコンポーネントにアクセスすることです。user= "user"：test = "test"および同様の属性データ
親ページ
<todo-list>
<template v-slot:todo="slotProps" >
{
{slotProps.user.firstName}}
</template>
</todo-list>
//slotProps 可以随意命名
//slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"
子组件
<slot name="todo" :user="user" :test="test">
{
{ user.lastName }}
</slot>
data() {
return {
user:{
lastName:"Zhang",
firstName:"yue"
},
test:[1,2,3,4]
}
},
// {
{ user.lastName }}是默认数据 v-slot:todo 当父页面没有(="slotProps")
// 时显示 Zhang
表示
// yue
はスロットプロップの
親ページを分解します（子コンポーネントは同じままです）
// 相当于
function (slotProps) {
// 插槽内容
}
(slotProps)=>参数可以用slot标签上现有的值({user,test})替换
<todo-list>
<template v-slot:todo="{user,test}
" >
{
{user.firstName}}
</template>
</todo-list>
表示
パラメータ値の名前を置き換えます（後述）
<todo-list>
<template v-slot:todo="{user:person,test}
" >
{
{person.firstName}}
</template>
</todo-list>
// v-slot：[dynamicSlotName] = "{user：person、test}
表示
排他的なデフォルトのスロットの省略形（後で見ることができます）
それを使用する機会がなく、制限が多すぎると感じています
まとめ
vスロットを使用した後は、
1。名前を付ける必要があるかどうか（匿名スロット、名前付きスロット）
2。親ページが子ページに存在するデータをフェッチする必要があるかどうか（スコープスロット）を考慮する必要があります。
todo-listの例、
理解しやすいように試すことができます〜
親ページ
<template>
<div>
新插槽 v-slot 代替具名插槽 作用于插槽
<todo-list
>
<template #todo="{todos:list}">
<div @click = type(todos.id)>
{
{list.text}}
</div>
</template>
</todo-list>
</div >
</template>
<script>
import todoList from "@/components/component/slotTodoChildren";
export default {
name:"vSlot",
components:{
todoList
},
data() {
return {
}
},
methods: {
type(data){
console.log(data)
}
},
}
</script>
サブアセンブリ
<template>
<ul class="slotTodoChildren">
<li class="lis"
v-for="todo in todoList"
v-bind:key="todo.id"
>
<!--
我们为每个 todo 准备了一个插槽，
将 `todo(todoList里的)` 对象作为一个插槽的 prop 传入。
-->
<slot name="todo" :todos="todo">
<!-- 后备内容 -->
{
{ todo.text }}
</slot>
</li>
</ul>
</template>
<script>
export default {
name:"slotChildren",
data() {
return {
todoList:[
{
id:1,
text:"扫地"
},
{
id:2,
text:"做饭"
},
{
id:3,
text:"擦桌子"
}
]
}
},
created(){
console.log(this.filteredTodos)
}
}
</script>
<style scoped>
.slotTodoChildren .lis{
display: block;
background: #434534;
line-height:40px;
margin-top: 10px;
color: #fff;
font-size: 24px;
height: 40px;
}
</style>