目录
第一部分：具名插槽
第二部分：作用域插槽
第三部分：默认插槽
第一部分：具名插槽
具名插槽是指将父组件中的数据传到子组件中，此外，该类型插槽有三种写法，第一种是属于旧编写版本，后面两种是刚出来的。
父组件：
子组件：
第二部分：作用域插槽
作用域插槽是指将子组件中的数据传到父组件中，此外，该类型数据在父组件中可以进行遍历等数据操作。
父组件：
扫描二维码关注公众号，回复： 14513739 查看本文章
子组件：
子组件中的数据：
第三部分：默认插槽
默认插槽只需要子组件中含有一个slot标签即可，不用给定name值，变可以自动的插入，该内容属于多父组件内部值对应子组件内部单个slot。
父组件：
父组件数据：
子组件：
子组件：
整体案例讲解源码：
父组件：
<template>
<div>
<!-- <ChaCao> -->
<!-- 以下是作用域插槽 -->
<!-- <template #left="obj"> -->
<!-- <ul> -->
<!-- <li v-for="(item,index) in obj.data" :key="item.id" @click="btn(index)"> -->
<!-- { {item.title}} -->
<!-- </li> -->
<!-- </ul> -->
<!-- </template> -->
<!-- </ChaCao> -->
<!-- 具名插槽 -->
<!-- <ChaCao> -->
<!-- 第一种写法 -->
<!-- <span slot="left" >张三李四</span> -->
<!-- 第二种写法 -->
<!-- <template v-slot:center >张三李四</template> -->
<!-- 第三种写法 -->
<!-- <template #right>张三李四</template> -->
<!-- </ChaCao> -->
<!-- 默认插槽 -->
<!-- 因为在当前页面使用了数据 所以就不用再传 :listData了 -->
<ChaCao title="美食" >
<!-- 这里可以添加其它内容，比如图片或者影视等等 -->
<ul>
<li v-for="(item, index) in foods" :key="index">{ { item }}</li>
</ul>
</ChaCao>
<ChaCao title="游戏" >
<!-- 这里可以添加其它内容，比如图片或者影视等等 -->
<ul>
<li v-for="(item, index) in games" :key="index">{ { item }}</li>
</ul>
</ChaCao>
<ChaCao title="电影">
<!-- 这里可以添加其它内容，比如图片或者影视等等 -->
<ul>
<li v-for="(item, index) in films" :key="index">{ { item }}</li>
</ul>
</ChaCao>
</div>
</template>
<script>
import ChaCao from "./components/ChaCao.vue";
export default {
name: "RiC",
data() {
return {
foods: ["火锅", "烧烤", "小龙虾", "牛排"],
games: ["红色警戒", "穿越火线", "劲舞团"],
films: ["《教父》", "《拆弹专家》", "《你好，李焕英》"],
};
},
components: {
ChaCao,
},
methods: {
btn(index) {
console.log(index);
},
},
};
</script>
子组件：
<template>
<div>
<!-- 作用域插槽的写法 这里不写name值，那么父组件中也不用name属性值 直接写default -->
<!-- <slot :data="array" name="left"></slot> 或者 <slot :data="array"></slot>-->
<!-- 具名插槽 -->
<!-- <div>{ {title}}</div> -->
<!-- <slot name="left"></slot> -->
<!-- <slot name="center"></slot> -->
<!-- <slot name="right"></slot> -->
<!-- 默认插槽 -->
<h3>{ {title}}分类</h3>
<!-- 挖个坑 等组件的使用者来使用 -->
<slot>这里可以添加默认值，若是传了那么直接使用传来得数据</slot>
</div>
</template>
<script>
export default{
name:'ChaCao',
// data(){
// return{
// array:[
// {id:1,title:'李四',sex:'男'},
// {id:2,title:'王五',sex:'男'},
// {id:3,title:'赵六',sex:'男'},
// {id:4,title:'田思思',sex:'女'},
// ]
// }
// },
props:['title'],
}
</script>