Vue中的插槽怎么使用
现在修改需求，每个分类都要展示不同的内容：
这里就用到了插槽，修改 Category.vue
{{title}}分类
修改 App.vue
具名插槽
修改 Category.vue
{{title}}分类
修改 App.vue
现在修改需求，每个分类都要展示不同的内容：
这里就用到了插槽，修改 Category.vue
{{title}}分类
修改 App.vue
修改 Category.vue
{{title}}分类
修改 App.vue
如果数据在 Category 中，但需要展示不同的形式，我们可以通过插槽传值，类似于我们从父组件向子组件传值：
{{title}}分类
App 中在子组件中使用 包裹要展示的内容，标签中可以使用scope接收传过来的值
{{receiveValue.msg}}
{{msg}}
1.作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件问通信的方式，适用于父组件==>子组件
2.分类：默认插槽、具名插槽、作用域插槽
3.使用方式：
默认插槽
父组件中：
html结构
子组件中：
具名插槽
父组件中：
html结构1html结构2
子组件中：
<1--定义插槽-->
作用域插槽
1.理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，(games 数据在 Category 组件中，但使用数据所遍历出来的结构由 App 组件决定)
2.具体编码：
父组件中：
子组件中：
注意：scope和slot-scope过时了，可以使用v-slot
以上就是关于“Vue中的插槽怎么使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注恰卡编程网行业资讯频道。
发布于 2022-04-15 22:33:05