この章では、スロットの範囲を説明するために、スロットのスロットについてのスロットの使用の基本的な点]、[名前のスロットのスロット]、[スロット]です。
- スロット（スロット）名前が示唆するように、テンプレートブロックは、特性及び大きいモジュールを有するように、指定された位置に挿入され、、、ヴューにより繰り越すコンテンツに決定するためのスロットを置く概念であります再利用。
- ディスプレイ上のスロットがどこサブアッセンブリによって制御されながらディスプレイは、親コンポーネントによって制御される方法を示していない重大なスロット。
まず、スロットの基本的な使用
サブコンポーネント：
<template>
<div>
<a :href="url">
<slot>
默认显示，父组件没有内容时候显示
</slot>
</a>
</div>
</template>
<script>
export default {
// 子组件
name: 'childSlot1',
props:['url']
}
</script>親コンポーネント：
<template>
<div>
<child-slot1 :url="url">
<span>我是父组件传递进来的内容</span>
</child-slot1>
</div>
</template>
<script>
import childSlot1 from './childSlot1'
export default {
// 父组件
name: 'Index',
data(){
return {
url: 'https://www.baidu.com'
}
},
components: {
childSlot1
}
}
</script>上記のように、サブアセンブリコンテンツに充填することができる（又は充填なくてもよい）親コンポーネント、スパンタグの内容！あなたは、デフォルトのサブスロットの内容を記入していない場合。
第二に、匿名ソケット
サブコンポーネント：スロットラベルの定義は、その後、別の名前を定義するために名前を付けます。
<template>
<div>
<a :href="url">
<div>
<slot name="header">
头部导航
</slot>
</div>
<div>
<slot name="footer">
尾部导航
</slot>
</div>
</a>
</div>
</template>
<script>
export default {
// 子组件
name: 'childSlot1',
props:['url']
}
</script>親成分：充填テンプレート、および、書き込みVスロット、及びその後の名前で別のスロットと区別サブアセンブリ。
<template>
<div>
<child-slot1 :url="url">
<template v-slot:header>
<span>父组件改变头部导航</span>
</template>
<template v-slot:footer>
<span>父组件改变尾部导航</span>
</template>
</child-slot1>
</div>
</template>
<script>
import childSlot1 from './childSlot1'
export default {
// 父组件
name: 'Index',
data(){
return {
url: 'http://www.imooc.com'
}
},
components: {
childSlot1
}
}
</script>第三に、スロットの範囲
スコープスロット使用シナリオ：構造、外部の親コンポーネント（親要素）サブアセンブリ円形のリストを取得することができるテンプレートで指定されたサブアセンブリに定義されたデータ
サブコンポーネント：
<template>
<div>
<a :href="url">
<slot :slotData="website">
{{website.subTitle}}
</slot>
</a>
</div>
</template>
<script>
export default {
// 子组件
name: 'childSlot1',
props:['url'],
data () {
return {
website: {
url: 'https://www.imooc.com',
title: '慕课网',
subTitle: '程序员的最爱学习网站'
}
}
}
}
</script>親コンポーネント：
<template>
<div>
<child-slot1 :url="url">
<!-- slotProps的名字可以随便取 -->
<template v-slot="slotProps">
{{slotProps.slotData.title}}
</template>
</child-slot1>
</div>
</template>
<script>
import childSlot1 from './childSlot1'
export default {
// 父组件
name: 'Index',
data(){
return {
url: 'http://www.baidu.com'
}
},
components: {
childSlot1
}
}
</script>
