作用：让父组件可以向子组件指定位置插入html结构 也是一种组件间通信的方式 适用于 父组件传子组件
2.分类:默认插槽 具名插槽 作用域插槽
3.使用方式:
(1)默认插槽:
父组件中:<子组件名称><div>结构1</div>
子组件中:<template><div><slot>插槽内容</slot></div>
(2)具名插槽
父组件中:<子组件名称>
<template slot="center"><div>结构1</div>
<div>结构1</div>
子组件中:<template><div><slot name="center">插槽内容</slot></div>
(3)作用域插槽:
1.理解:数据在组件的自身 但根据数据生成的结构需要组件的使用者来决定(games数据在子组件中,但使用数据所遍历出来的结构由App组件决定)
2.具体:
父组件中:
<子组件名称><template scope="jkjj"><div><slot>插槽内容</slot></div>
<ul>
<li v-for="(g, index) jkjj" :key="index">{{ g }}</li>
</ul>
</template>
在父组件App中
<template>
<div class="container">
<Category title="游戏">
<template scope="atguigu">
<!-- scope="x"x可自定义 App组件作为组件的使用者 数据是放在插槽定义的组件里面的 生成的结构是在使用者组件里面的-->
<!-- {{atguigu.jkjj}} -->
<ul>
<li v-for="(g, index) in atguigu.jkjj" :key="index">{{ g }}</li>
</ul>
</template>
</Category>
<Category title="游戏">
<template scope="{jkjj}">
<ol>
<li style="color:red" v-for="(g, index) in jkjj" :key="index">{{ g }}</li>
</ol>
</template>
</Category>
<Category title="游戏">
<template scope="{jkjj}">
<h4 v-for="(g, index) in jkjj" :key="index">{{ g }}</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from "./components/Category";
export default {
name: "App",
methods: {},
components: {
Category,
},
};
</script>
<style scoped >
.container,
.foot {
display: flex;
justify-content: space-around;
}
video {
width: 100%;
}
</style>
在子组件中
<template>
<div class="category">
<h3>{{title}}分类</h3>
<slot :jkjj="games">我是默认的一些内容</slot>
</div>
</template>
<script>
export default {
name:'Category',
props:['title'],
data(){
return{
games:['红色警戒','穿越火线','劲舞团','超级玛丽',],
}
},
components: {
}
}
</script>
<style scoped>
.category{
background-color: skyblue;
width: 200px;
height: auto;
}
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/163343.html
