插槽
默认插槽
不能直接给插槽写样式,因为会被替换掉,可以包起来,给外面的盒子样式
-
App.vue
<template> <div id="app"> <Category title="美食" :listDate="foods"> <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" /> </Category> <Category title="游戏"> <ul> <li v-for="(item, index) in games" :key="index">{{ item }}</li> </ul> </Category> <Category title="电影"> <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" ></video> </Category> </div> </template> <script> import Category from "./components/Category.vue"; export default { name: "App", components: { Category, }, data() { return { foods: ["火锅", "烧烤", "小龙虾", "牛排"], games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"], films: ["教父", "拆弹专家", "你好,李焕英", "功夫"], }; },
-
Category.vue
就是在子组件里面定义一个插槽,等着组件的使用者进行填充 ,父组件没填充则它会默认显示标签里面的内容
<template>
<div class="category">
<h3>{{ title }}分类</h3>
<slot>我是默认值,当使用者没有传递具体结构时,我会出现</slot>
</div>
</template>
<script>
export default {
name: "Category",
props: ["title"],
};
</script>
具名插槽
1.最新写法v-slot:footer,但是只能写在template上; 2.父组件里面是可以追加的,不会覆盖
v-slot:可以简写为#
<template>
<div id="app">
<Category title="美食" :listDate="foods">
<img
slot="center"
src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg"
alt=""
/>
<a slot="footer" href="http://www.atguigu.com">更多美食</a>
</Category>
<Category title="游戏">
<ul slot="center">
<li v-for="(item, index) in games" :key="index">{{ item }}</li>
</ul>
<div class="foot" slot="footer">
<a href="http://www.atguigu.com">单机游戏</a>
<a href="http://www.atguigu.com">网络游戏</a>
</div>
</Category>
<Category title="电影">
<video
slot="center"
controls
src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
></video>
<!-- 最新写法,但是只能用在template上 -->
//<template v-slot:footer>
<template #footer>
<div class="foot">
<a href="http://www.atguigu.com">经典</a>
<a href="http://www.atguigu.com">热门</a>
<a href="http://www.atguigu.com">推荐</a>
</div>
<!-- 是可以追加的,不会覆盖 -->
<h4>欢迎前来观影</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from "./components/Category.vue";
export default {
name: "App",
components: {
Category,
},
data() {
return {
foods: ["火锅", "烧烤", "小龙虾", "牛排"],
games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
films: ["教父", "拆弹专家", "你好,李焕英", "功夫"],
};
},
};
</script>
<style>
#app {
display: flex;
justify-content: space-around;
}
video {
width: 200px;
}
.foot {
display: flex;
justify-content: space-around;
}
h4 {
text-align: center;
}
</style>
<template>
<div class="category">
<h3>{{ title }}分类</h3>
<!-- 就是定义一个插槽,等着组件的使用者进行填充 -->
<slot name="center">我是默认值,当使用者没有传递具体结构时,我会出现1</slot>
<slot name="footer">我是默认值,当使用者没有传递具体结构时,我会出现2</slot>
</div>
</template>
<script>
export default {
name: "Category",
props: ["title"],
};
作用域插槽
1.就是以插槽的形式让父组件可以使用子组件的数据,2.父组件必须使用template包裹起来3.且接收过来的值用对象的形式包裹着
v-slot:default=“scoped” 可以简写成#default=“scoped” 或者 v-slot=“scoped”
父组件
<template>
<div id="app">
<Category title="游戏">
<template #Cat="atguigu">
<ul>
<li v-for="(g, index) in atguigu.games" :key="index">{{ g }}</li>
</ul>
</template>
</Category>
<Category title="游戏">
<!-- 解构赋值 -->
<template #Cat="{ games }">
<ol>
<li style="color: red" v-for="(g, index) in games" :key="index">
{{ g }}
</li>
</ol>
</template>
</Category>
<Category title="游戏">
<template #Cat="{ games }">
<h4 v-for="(g, index) in games" :key="index">{{ g }}</h4>
</template>
</Category>
</div>
</template>
------------------------------------------------------------------------------------
子组件
<template>
<div class="category">
<h3>{{ title }}分类</h3>
<slot name="Cat" :games="games"
>我是默认值,当使用者没有传递具体结构时,我会出现1</slot
>
</div>
</template>
<script>
export default {
name: "Category",
props: ["title"],
data() {
return {
games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
};
},