#|[vue] slot插槽默认插槽，具名插槽，作用域插槽 vue.js|vue

文章目录

- 插槽
- - 不使用插槽
  - - 效果
    - 分析
- 默认插槽
- - - 效果
    - 分析
- 具名插槽
- - - 效果
    - 分析
- 作用域插槽
- - - 效果
    - 分析
- 再次理解作用域插槽
- 代码：
- - 默认插槽：
  - 具名插槽
  - 作用域插槽

插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。
分类：默认插槽、具名插槽、作用域插槽
使用方式：
1. 具名插槽：
  
  父组件中：子组件中：
2. 作用域插槽：
  1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
  2. 具体编码：

不使用插槽
效果

文章图片

分析 App.vue

> import Category from './components/Category' export default { name:'App', components:{Category}, data() { return { foods:['火锅','烧烤','小龙虾','牛排'], games:['红色警戒','穿越火线','劲舞团','超级玛丽'], films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']} }, } > .container{ display: flex; justify-content: space-around; }

Category.vue

> export default { name: "Category", props: ["title", "listData"], }; >

文章图片

文章图片

默认插槽

父组件中： html结构1 子组件中：

效果

文章图片

不止有列表，还有图片，还有视频

文章图片

分析

文章图片

文章图片

具名插槽效果

文章图片

分析

文章图片

文章图片

作用域插槽如果需要用一句话去总结作用域插槽，那就是在父组件中访问子组件的数据，或者从数据流向的角度来讲就是将子组件的数据传递到父组件。
效果 【#|[vue] slot插槽默认插槽，具名插槽，作用域插槽】

文章图片

文章图片

分析理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

Category.vue 子组件

文章图片

App.vue 父组件
必须用template包起来，
第一个是ul列表
第二个是ol
第三个是H4标题

文章图片

再次理解作用域插槽

文章图片

文章图片

可以直接解构

文章图片

代码：默认插槽：
Category.vue

> export default { name: "Category", props: ["title"], }; >

Category.vue

> import Category from './components/Category' export default { name:'App', components:{Category}, data() { return { foods:['火锅','烧烤','小龙虾','牛排'], games:['红色警戒','穿越火线','劲舞团','超级玛丽'], films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》'] } }, } > .container{ display: flex; justify-content: space-around; } video{ width: 100%; }

具名插槽
Category.vue

> export default { name: "Category", props: ["title"], }; >

App.vue

> import Category from './components/Category' export default { name:'App', components:{Category}, data() { return { foods:['火锅','烧烤','小龙虾','牛排'], games:['红色警戒','穿越火线','劲舞团','超级玛丽'], films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》'] } }, } > .container,.foot{ display: flex; justify-content: space-around; } video{ width: 100%; }