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常见面试题问题

相关内容

热门资讯

安卓系统怎么调语言设置,And... 你有没有发现，手机里的文字突然变得陌生起来？是不是觉得安卓系统的语言设置有点让人摸不着头脑？别急，今...
安卓怎么换新系统,体验全新功能 亲爱的安卓用户们，是不是觉得你的手机越来越卡，功能也越来越跟不上潮流了呢？别急，今天就来教你怎么给安...
杂牌安卓平板电脑刷系统,解锁无... 你有没有想过，那些杂牌安卓平板电脑，虽然价格亲民，但有时候系统更新慢，功能也受限？别急，今天就来教你...
塞班系统游戏移植安卓,畅享新体... 你有没有想过，那些曾经陪伴我们度过无数欢乐时光的塞班系统游戏，现在竟然可以在安卓手机上继续畅玩？没错...
安卓只有一个系统,揭秘安卓系统... 你知道吗？在手机江湖里，安卓系统可是独树一帜的存在呢！它就像一位武林高手，凭借一己之力，在众多操作系...
软件包安卓系统,软件包的奥秘与... 你有没有发现，手机里的那些应用，就像是魔法一样，让我们的生活变得如此便捷？而这背后，离不开一个强大的...
怎么卸载安卓原生系统,安卓原生... 手机用久了，是不是觉得安卓原生系统有点卡？或者是想尝试一下全新的操作系统？别急，今天就来手把手教你如...
安卓办公系统推荐知乎,知乎推荐... 你有没有想过，在手机上办公也能这么高效？现在，我就要给你安利几个安卓办公系统，让你的手机变成一个小型...
安卓版本商超收银系统,高效管理... 你有没有想过，那些每天在商超里忙碌的收银员，他们手中的安卓版本收银系统，竟然是如此神奇的存在？今天，...
旧手机刷安卓tv系统,轻松打造... 你那台旧手机是不是已经闲置在角落里了？别让它默默无闻地度过余生，今天就来教你怎么给它来个华丽转身，让...
锁屏壁纸推荐安卓系统,安卓系统... 亲爱的手机控们，你是不是也和我一样，对锁屏壁纸有着超乎寻常的热爱？每天醒来，第一眼看到的便是那块小小...
安卓系统不使用sd卡,安卓系统... 你知道吗？最近在手机圈子里，有一个话题可是引起了不小的讨论呢！那就是安卓系统的新趋势——不再使用SD...
平板系统安卓版有哪些,功能丰富... 你有没有发现，现在的生活越来越离不开平板电脑了？无论是工作还是娱乐，平板电脑都成了我们生活中不可或缺...
安卓系统呼吸灯作用,探索安卓系... 你知道吗？你的安卓手机里有个神奇的小功能，它就像你的私人小秘书，时刻关注着你的生活节奏。没错，说的就...
安卓系统的设置停止,自动生成文... 亲爱的手机控们，你是否也有过这样的经历：手机里装了各种应用，可就是觉得运行速度越来越慢，有时候甚至卡...
魅动app安卓系统,安卓系统下... 你有没有发现，最近手机上多了一个叫“魅动app”的小家伙？它可是安卓系统里的一股清流，让人爱不释手。...
安卓怎么玩电脑系统,跨平台操作... 你是不是也和我一样，对安卓系统爱得深沉，但又想体验一下电脑系统的强大呢？别急，今天就来手把手教你如何...
安卓系统买什么品牌好用,盘点几... 你最近是不是在为选择一款好用的安卓手机而烦恼呢？市面上品牌繁多，让人眼花缭乱。别急，今天我就来给你详...
安卓系统怎样不卡顿,尽享丝滑体... 手机用久了是不是感觉越来越卡？别急，今天就来跟你聊聊安卓系统怎样不卡顿，让你的手机焕发新生！一、清理...
vidaa3是安卓系统,安卓系... 你有没有听说过Vidaa3这款智能电视？它可是最近在市场上掀起了一股热潮呢！你知道吗，Vidaa3搭...