AI 助理
备案控制台
开发者社区 云计算 文章 正文

113.【Vue-细刷-04】（四）

2023-09-24 83 发布于浙江
版权
举报
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 113.【Vue-细刷-04】

(二十六)、插槽 (slot)

1.问题探究

我们想复用一个组件，然而这个组件的各个数据是不同的。我们通过尝试发现:只能通过对复用的组件 v-show、v-if较为复杂的实现这个功能。否则不能实现

App.vue

<template>
  <div class="app">
    <!-- 组件可以传递静态的也可以传递动态的 -->
    <Category  title="游戏"  :game_arr1="gamArr"/>
    <Category  title="美食"  :food_url1="foodURL"/>
    <Category/>
  </div>
</template>
<script>
  import  Category  from './components/Category.vue'
export default {
  components:{
    Category,
  },
  data() {
    return {
      gamArr:[
        {id:'001',name:'王者荣耀',price:100},
        {id:'002',name:'刺激战场',price:100},
        {id:'003',name:'创越火线',price:100},
        {id:'004',name:'反恐精英和',price:100},
      ],
      foodURL:'https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E7%83%A7%E7%83%A4%20200%2A100&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&hd=&latest=&copyright=&cs=3049322705,2682672783&os=365147000,2674100539&simid=3049322705,2682672783&pn=0&rn=1&di=7214885350303334401&ln=1783&fr=&fmq=1683463448132_R&ic=&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=1e&objurl=https%3A%2F%2Fview-cache.book118.com%2Fview6%2FM05%2F27%2F16%2FwKh2BGEgidOASTYzAAMVLqY5WWU809.png&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&dyTabStr=MCwxLDYsMyw0LDUsMiw3LDgsOQ%3D%3D'
    }
  },
}
</script>
<style>
  .app{
    width: 1000px;
    height: 400px;
    background-color: rgb(70, 193, 156);
    /* 横向展开 */
    display: flex;  
    /* 自适应排列 */
    justify-content: space-around;
  }
</style>

Category.vue

<template>
  <div class="cate">
    <h3 class="t1">{{title}}分类</h3>
    <ul>
        <li v-for="ga_obj in game_arr1" :key="ga_obj.id">{{ga_obj.name}}</li>
    </ul>
  </div>
</template>
<script>
export default {
    // TODO: 子组件可以接受传过来的动态数据、也可以接受动态的数据。
    props:['game_arr1','title','food_url1']
}
</script>
<style>
.cate {
    width:240px;
    height: 300px;
    background-color: aquamarine;
}
.t1 {
    text-align: center;
}
</style>

于是我们想: 这样好复杂啊。能不能直接在父组件中直接将一整个模板传递给子组件。

非自闭和标签:我们能够解析到组件中数据，但是不知道放到组件的哪个位置。所以只能弃掉!!!!

2.默认插槽

所以我们只要借助插槽就能够实现指定放的位置，然后开标签也就不会被丢弃。插槽放在哪里，就是放在哪里。

默认插槽都会接受掉…

App.vue

组件开区间

<template>
  <div class="app">
    <!-- 组件可以传递静态的也可以传递动态的 -->
    <Category  title="游戏">
    <ul>
        <li v-for="ga_obj in gamArr" :key="ga_obj.id">{{ga_obj.name}}</li>
    </ul>
    </Category>
    <Category  title="美食">
      <img :src="foodURL" alt="122">
    </Category>
    <Category title="视频">
      <video  controls :src="videoUL"></video>
    </Category>
  </div>
</template>
<script>
  import  Category  from './components/Category.vue'
export default {
  components:{
    Category,
  },
  data() {
    return {
      gamArr:[
        {id:'001',name:'王者荣耀',price:100},
        {id:'002',name:'刺激战场',price:100},
        {id:'003',name:'创越火线',price:100},
        {id:'004',name:'反恐精英和',price:100},
      ],
      foodURL:'https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E7%83%A7%E7%83%A4%20200%2A100&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&hd=&latest=&copyright=&cs=3049322705,2682672783&os=365147000,2674100539&simid=3049322705,2682672783&pn=0&rn=1&di=7214885350303334401&ln=1783&fr=&fmq=1683463448132_R&ic=&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=1e&objurl=https%3A%2F%2Fview-cache.book118.com%2Fview6%2FM05%2F27%2F16%2FwKh2BGEgidOASTYzAAMVLqY5WWU809.png&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&dyTabStr=MCwxLDYsMyw0LDUsMiw3LDgsOQ%3D%3D',
      videoUL:'https://www.bilibili.com/video/BV12h4y1n7tt?t=3.5'
  }
  }
}
</script>
<style>
  .app{
    width: 1000px;
    height: 400px;
    background-color: rgb(70, 193, 156);
    /* 横向展开 */
    display: flex;  
    /* 自适应排列 */
    justify-content: space-around;
  }
  video{
    width: 100%;   // 视频占的百分比
  }
</style>

Category.vue

默认插槽

<!-- 默认插槽 -->
    <slot></slot>

<template>
  <div class="cate">
    <h3 class="t1">{{title}}分类</h3>
    <!-- 默认插槽 -->
    <slot></slot>
  </div>
</template>
<script>
export default {
    // TODO: 子组件可以接受传过来的动态数据、也可以接受动态的数据。
    props:['title']
}
</script>
<style>
.cate {
    width:240px;
    height: 300px;
    background-color: aquamarine;
}
.t1 {
    text-align: center;
}
</style>

3.命名插槽

App.vue

内嵌一个template标签
    <Category  title="游戏">
      <template slot="game">
           <ul>
            <li v-for="ga_obj in gamArr" :key="ga_obj.id">{{ga_obj.name}}</li>
          </ul>
      </template>
    </Category>

<template>
  <div class="app">
    <!-- 组件可以传递静态的也可以传递动态的 -->
    <Category  title="游戏">
      <template slot="game">
           <ul>
        <li v-for="ga_obj in gamArr" :key="ga_obj.id">{{ga_obj.name}}</li>
          </ul>
      </template>
    </Category>
    <Category  title="美食">
      <template slot="food">
          <img :src="foodURL" alt="122">
      </template>
    </Category>
    <Category title="视频">
      <template slot="vido">
        <video  controls :src="videoUL"></video>
      </template>
    </Category>
  </div>
</template>
<script>
  import  Category  from './components/Category.vue'
export default {
  components:{
    Category,
  },
  data() {
    return {
      gamArr:[
        {id:'001',name:'王者荣耀',price:100},
        {id:'002',name:'刺激战场',price:100},
        {id:'003',name:'创越火线',price:100},
        {id:'004',name:'反恐精英和',price:100},
      ],
      foodURL:'https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E7%83%A7%E7%83%A4%20200%2A100&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&hd=&latest=&copyright=&cs=3049322705,2682672783&os=365147000,2674100539&simid=3049322705,2682672783&pn=0&rn=1&di=7214885350303334401&ln=1783&fr=&fmq=1683463448132_R&ic=&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=1e&objurl=https%3A%2F%2Fview-cache.book118.com%2Fview6%2FM05%2F27%2F16%2FwKh2BGEgidOASTYzAAMVLqY5WWU809.png&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&dyTabStr=MCwxLDYsMyw0LDUsMiw3LDgsOQ%3D%3D',
      videoUL:'https://www.bilibili.com/video/BV12h4y1n7tt?t=3.5'
  }
  }
}
</script>
<style>
  .app{
    width: 1000px;
    height: 400px;
    background-color: rgb(70, 193, 156);
    /* 横向展开 */
    display: flex;  
    /* 自适应排列 */
    justify-content: space-around;
  }
  video{
    width: 100%;
  }
</style>

Category.vue

给插槽起名字，只有名字对应的插槽才能使用
    <slot name="game"></slot>
    <slot name="food"></slot>
    <slot name="vido"></slot>

<template>
  <div class="cate">
    <h3 class="t1">{{title}}分类</h3>
    <!-- 默认插槽 -->
    <slot name="game"></slot>
    <slot name="food"></slot>
    <slot name="vido"></slot>
  </div>
</template>
<script>
export default {
    // TODO: 子组件可以接受传过来的动态数据、也可以接受动态的数据。
    props:['title']
}
</script>
<style>
.cate {
    width:240px;
    height: 300px;
    background-color: aquamarine;
}
.t1 {
    text-align: center;
}
</style>

吉士先生
+关注
548文章
目录
打赏
0
0
0
0
15
分享
相关文章
小宋1021
|
10天前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
小宋1021
65 4
小宋1021
|
4月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
小宋1021
215 1
勿入红尘啊
|
1月前
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
勿入红尘啊
128 56
小宋1021
|
1月前
|
SQL JavaScript 前端开发
Vue实现动态数据透视表（交叉表）
Vue实现动态数据透视表（交叉表）
小宋1021
160 13
游客lijmi4663rgsa
|
1月前
|
数据采集 资源调度 JavaScript
极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图
本文介绍了使用 Vue Flow 绘制流程图的方法与技巧。Vue Flow 是一个灵活强大的工具，适合自定义复杂的流程图。文章从环境要求（Node.js v20+ 和 Vue 3.3+）、基础入门案例、自定义功能（节点与连线的定制、事件处理）到实际案例全面解析其用法。重点强调了 Vue Flow 的高度灵活性，虽然预定义内容较少，但提供了丰富的 API 支持深度定制。同时，文中还分享了关于句柄（handles）的使用方法，以及如何解决官网复杂案例无法运行的问题。最后通过对比 mermaid，总结 Vue Flow 更适合需要高度自定义和复杂需求的场景，并附带多个相关技术博客链接供进一步学习。
游客lijmi4663rgsa
477 1
游客lijmi4663rgsa
|
1月前
|
存储 数据采集 供应链
属性描述符初探——Vue实现数据劫持的基础
属性描述符还有很多内容可以挖掘，比如defineProperty与Proxy的区别，比如vue2与vue3实现数据劫持的方式有什么不同，实现效果有哪些差异等，这篇博文只是入门，以后有时间再深挖。 博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
42 0
心疼你的一切
|
2月前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器，用于实现单页面应用（SPA）的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系，Vue Router 将用户访问的路径与对应的组件关联，支持哈希和历史模式监听 URL 变化，确保页面导航时正确渲染组件。
心疼你的一切
84 9
小华同学ai
|
2月前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg：震撼来袭！这款基于 Vue 和 Flowable 的企业级工程项目管理项目，你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台，免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求，提供流程设计、部署、监控和任务管理等功能，适用于企业办公、生产制造、金融服务等多个场景，助力企业提升效率与竞争力。
小华同学ai
175 12
心疼你的一切
|
2月前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中，class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定，可以动态更新元素的 class 属性，支持对象和数组语法，适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式，Vue 会根据数据变化自动更新 DOM。
心疼你的一切
67 3
心疼你的一切
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库，用于构建单页面应用（SPA）。它将不同页面映射到对应组件，支持嵌套路由、路由参数和导航守卫等功能，简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载，提升性能和开发效率。安装命令：`npm install vue-router`。
心疼你的一切
69 1

热门文章

最新文章

  • 1
    Vue实现动态数据透视表（交叉表）
    26
  • 2
    Spring Boot 与 Vue.js 前后端分离中的数据交互机制
    28
  • 3
    vue实现任务周期cron表达式选择组件
    30
  • 4
    Ant Design Vue 树选择冲突 4063:34 Warning: Conflict value of node (xxx) has already used by node
    2
  • 5
    Vue3+cropperjs 实现图片裁剪功能
    10
  • 6
    jeecg-boot中实现跳过登录验证访问其他vue页面
    17
  • 7
    详细介绍 Vue3 的常见目录结构
    3
  • 8
    基于 SpringBoot+Vue 的网上图书商城管理系统（附源码，教程）上
    15
  • 9
    Vue3+TS系统学习一 - 邂逅Vue3和TypeScript
    3
  • 10
    揭密 Vue 的双向绑定
    1
  • 1
    一些vue项目的心得
    78
  • 2
    Vue 全局状态管理新宠：Pinia实战指南
    239
  • 3
    Vue3 之 computed 属性，实现日历翻月份功能
    117
  • 4
    Vue3 之 computed 属性，实现日历翻月份功能
    161
  • 5
    Vue.js组件通信策略详解
    89
  • 6
    在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
    214
  • 7
    前端框架与库 - Vue.js 组件与路由
    85
  • 8
    vue代码优化方案
    115
  • 9
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    433
  • 10
    在Vue中，子组件向父组件传递数据
    176

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • jQuery开发教程
  • React 入门教程开发文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    oss创建bucket
    目录