插槽:
样式既可以放入父组件也可以放入子组件
在父组件中:<子组件></子组件> 中 插入内容
在子组件中:slot 要插入的位置
我配置的子组件:components: { B }
默认插槽
// 父组件的template
<B>
<h2>提示</h2>
<h4>slot插入到demo: 当只有一个卡槽且没有name属性时不用slot属性</h4>
</B>
// 子组件 B 的 template
<slot></slot>
具名插槽
把要插入的全部内容用template包裹
// 父组件
<B>
<!-- <template slot="demo"> -->
<template v-slot:demo> // 2.6之后(包括3)写法(推荐)
<h2>提示</h2>
<h4 slot="demo">
slot插入到demo: 当只有一个卡槽且没有name属性时不用slot属性
</h4>
</template>
</B>
// 子组件 B
<slot></slot>
作用域插槽
// 此数据在子组件
data() {
return {
games: ["吃", "喝", "玩", "乐"],
title:'游戏'
}
}
// 父组件
<B>
<!-- slot-scope 将子组件的数据传入,注意用template包裹 -->
<!-- <template slot-scope="{ games, title }" > -->
<template v-slot="{ title, games }"> // 2.6之后写法(推荐)
<h2>{{ title }}</h2>
<ol>
<li v-for="(game, index) in games" :key="index">{{ game }}</li>
</ol>
</template>
</B>
// 子组件
<slot :games="games" :title="title"></slot>
注意:如果不用解构,写成 v-slot:demo=“BB” ,表示子组件传入的数据,
引用:BB.title , BB.games
具名和作用域插槽
// 此数据在子组件
data() {
return {
games: ["吃", "喝", "玩", "乐"],
title:'游戏'
}
}
// 父组件
<B>
<!-- <template slot-scope="{ games, title }" slot="demo"> -->
<template v-slot:demo="{ title, games }">
<h2>{{ title }}</h2>
<ol>
<li v-for="(game, index) in games" :key="index">{{ game }}</li>
</ol>
</template>
</B>
// 子组件
<slot name="demo" :games="games" :title="title"></slot>