Vue基础19之插槽
创始人
2024-05-30 01:23:55
0次

Vue基础19

  • 插槽
    • 不使用插槽
      • App.vue
      • Category.vue
    • 默认插槽：slot
      • App.vue
      • Category.vue
    • 具名插槽
      • App.vue
      • Category.vue
    • 作用域插槽
      • App.vue
      • Category.vue
    • 总结

插槽

不使用插槽

App.vue

Category.vue

在这里插入图片描述

默认插槽：slot




    我是一些默认值，当使用者没有传递具体结构时，我会出现

图片链接：
https://s3.ax1x.com/2021/01/16/srJlq0.jpg
视频链接：
http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4

App.vue

Category.vue

在这里插入图片描述

具名插槽

更多美食


我是一些默认值，当使用者没有传递具体结构时，我会出现我是一些默认值，当使用者没有传递具体结构时，我会出现

App.vue

Category.vue

在这里插入图片描述

作用域插槽

给使用者传值

我是一些默认值，当使用者没有传递具体结构时，我会出现

使用者通过template中的scope获取值

App.vue

Category.vue

在这里插入图片描述

总结

  1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件
  2. 分类：默认插槽、具名插槽、作用域插槽
  3. 使用方式：
    （1）默认插槽：
    父组件中：
html结构1

子组件中：

（2）具名插槽：
父组件中：

子组件中：

（3）作用域插槽
①理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
②具体编码：
父组件中：

子组件中：
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：六、死信队列

下一篇：BERT常见面试题问题

相关内容

热门资讯

省电手机推荐安卓系统,安卓系统... 手机这玩意儿，对于我们这些手机控来说，简直就是生活的必需品。但是，你知道吗？现在市面上那么多手机，要...
安卓系统衰落怎么恢复,探寻衰落... 你有没有发现，最近安卓系统好像有点儿“水土不服”了呢？曾经的霸主地位，如今似乎有些动摇。不过别急，今...
安卓系统手机应用锁,安全无忧的... 你有没有发现，现在手机里的秘密越来越多，是不是也跟小秘密一样，想要找个地方藏起来呢？没错，今天就要来...
安卓系统书院源app,安卓系统... 你有没有发现，手机里的安卓系统越来越智能了？今天，我要给你介绍一个特别有意思的书院源app，它可是安...
安卓系统8.1平板推荐,安卓8... 你有没有想过，拥有一款性能卓越、体验流畅的安卓系统8.1平板，简直就是移动办公和娱乐的完美搭档？没错...
谷歌不给华为安卓系统,探索替代... 你知道吗？最近科技圈可是炸开了锅！谷歌突然宣布，不给华为提供安卓系统了！这可不仅仅是两家公司之间的小...
选择安卓系统原因调查,揭秘安卓... 你有没有想过，为什么那么多人会选择安卓系统呢？是不是好奇他们到底看中了安卓的哪些“小秘密”？今天，就...
安卓系统的安全证书,守护移动安... 你知道吗？在咱们这个科技飞速发展的时代，手机已经成了我们生活中不可或缺的好伙伴。而说起手机，安卓系统...
谷歌安卓系统挣钱吗,如何通过它... 你有没有想过，那个无处不在的谷歌安卓系统，它到底是怎么赚钱的呢？没错，就是那个让我们的手机、平板、智...
GALGAME安卓换苹果系统,... 你有没有想过，那些在安卓手机上玩得如痴如醉的GALGAME，竟然也能在苹果系统上大放异彩？没错，就是...
华为宣布摆脱安卓系统,迈向自主... 哇，你知道吗？最近华为可是闹出了一个大新闻！那就是他们宣布要摆脱安卓系统，自己研发一套全新的操作系统...
安卓车机系统hcn,智能驾驶的... 你有没有发现，现在越来越多的汽车开始搭载智能化的车机系统了？这不，安卓车机系统HCN（Harmony...
超大平板安卓系统,创新体验与无... 你有没有想过，在这个科技飞速发展的时代，拥有一块超大平板电脑是多么酷炫的事情啊！想象那宽广的屏幕，无...
电脑装安卓系统步骤,电脑安装安... 你有没有想过，把安卓系统装在你的电脑上，是不是就像给电脑换了个新衣裳，瞬间变得时尚又实用呢？没错，今...
安卓系统视频存储软件,高效管理... 手机里的视频越来越多，是不是感觉存储空间不够用了？别急，今天就来给你安利几款安卓系统视频存储软件，让...
安卓系统如何连接奔驰,安卓系统... 你有没有想过，你的安卓手机和奔驰车之间也能来个亲密接触呢？没错，就是那种无缝连接的感觉，让你的手机和...
安卓系统emoji表情很少,探... 你知道吗？在手机世界里，emoji表情可是沟通的利器，它能让我们的聊天更加生动有趣。但是，你知道吗？...
安卓系统的德州游戏,刺激竞技体... 你有没有发现，安卓手机上的游戏世界越来越精彩了？尤其是那些德州游戏，简直让人停不下来！今天，就让我带...
xbox360安卓系统,探索跨... 你有没有想过，家里的老Xbox 360竟然也能变身成为安卓系统的超级玩家呢？没错，就是那个曾经陪伴我...
安卓系统怎么找云端,而是通过安... 你有没有想过，你的安卓手机里那些珍贵的照片、文件和笔记，其实都可以存放在云端，随时随地都能访问呢？没...