名前付きスロット
親コンポーネント
<template lang="pug">
.home
img(alt="Vue logo" src="../assets/logo.png")
HelloWorld(msg="Welcome to Your Vue.js + TypeScript App")
h2(slot="header") 标题
p 正文内容1
div(slot="footer") 底部信息
div(slot="footer2") 底部信息2
div 正文内容2
</template>サブアセンブリ
<template lang="pug">
.hello
h1 {
{ msg }}
slot(name="header")
p For a guide and recipes on how to configure / customize this project,<br>
slot(name="footer")
slot
</template>レンダリング結果
レンダリングルールの説明：
1：親コンポーネントに名前が付けられ、子コンポーネントにはレイアウトがありません-レンダリングはありません
2：スロットのない親コンポーネントのコンテンツは、デフォルトで子コンポーネントのデフォルト（名前なし）スロットに配布されます
スコープスロット
Slot-scopeはスコープスロットです。正式にはスコープスロットと呼ばれていますが、実際には、名前付きスロットと比較して、データのあるスロットと呼ぶことができます。名前付きスロットはコンポーネントのテンプレートに書き込まれ、スコープスロットではデータをスロットにバインドする必要があります。
例えば
親コンポーネント：
<template>
<div class="father">
<h3>这里是父组件</h3>
<!--第一次使用：用flex展示数据-->
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{
{item}}</span>
</div>
</template>
</child>
<!--第二次使用：用列表展示数据-->
<child>
<template slot-scope="user">
<ul>
<li v-for="item in user.data">{
{item}}</li>
</ul>
</template>
</child>
<!--第三次使用：直接显示数据-->
<child>
<template slot-scope="user">
{
{user.data}}
</template>
</child>
<!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
<child>
我就是模板
</child>
</div>
</template>サブアセンブリ：
<template>
<div class="child">
<h3>这里是子组件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}Three.vスロット
vue2.6以降、Vueは、名前付きスロットとスコープ付きスロットの新しい構文、つまりv-slot命令を導入しました。目的は、スロットとスコープスロットの構文を統合し、コードをより標準化して明確にすることです。具体的な使用法は次のとおりです。1。スロットの名前は、次のようにv-slot：slotNameの形式で使用されるようになりました。
<template v-slot:header> </template>2.ここで、v-slotはテンプレートにのみ追加できることに注意してください。これは、Vue2.5のスロットとは異なります。
<template v-slot:slotName="data"> </template>3.通常の状況では、テストコンポーネントの登録とコンポーネントテンプレートは次のように想定されています。
//组件模板
<template id="test">
<div>
<h3>这里是test组件</h3>
<slot></slot>
</div>
</template>
//组件注册
Vue.component('Test', {
template: '#test',
data() {
return {
msg: 'Hello World!'
}
}
})以下のpタグでテストコンポーネントデータを取得する必要がある場合、次のように記述されることがよくあります。
<Test>
<template v-slot:default>
<p>{
{msg}}</p>
</template>
</Test>
但是，由于组件的数据只能限于当前组件模板才能使用，所以它访问不了Test组件中的数据，为了解决这个问题，需要给组件模板中的元素上动态绑定一个对象属性，绑定到 元素上的属性我们称之为 slot props。该对象属性的名字可以自定义，而属性值就是Test组件数据的名字，这样就可以获取到Test组件中的数据，如下 <slot ：msg="msg"></slot>同時に、v-slotを使用して上記のコードをリファクタリングします。
<Test>
<template v-slot:default="data">//此处的data就是在<slot>中绑定的属性slot props
<p>{
{data.msg}}</p>
</template>
</Test>