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

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

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

关键词：
vue VUE.js
吉士先生
目录
相关文章
东方睿赢
|
3天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略：1) 精简代码和组件拆分以减少冗余；2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由；3) 数据懒加载和防抖节流处理高频事件；4) 图片压缩和选择合适格式，使用CDN加速资源加载；5) 利用浏览器缓存和组件缓存提高效率；6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法，可提升用户在复杂应用中的体验。
东方睿赢
10 0
老板这功能得加钱
|
3天前
|
JavaScript 前端开发
vue(1)，小白看完都会了
vue(1)，小白看完都会了
老板这功能得加钱
11 0
咕噜咕噜wy
|
3天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
咕噜咕噜wy
11 0
向画
|
3天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
向画
9 0
阿珊和她的猫
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
揭秘Vue中v-model的内部工作机制
揭秘Vue中v-model的内部工作机制
阿珊和她的猫
11 1
yqcoder
|
2天前
|
JavaScript 开发工具 git
Vue 入门系列：.env 环境变量
Vue 入门系列：.env 环境变量
yqcoder
10 1
谢妹纸
|
3天前
|
JavaScript
vue知识点
vue知识点
谢妹纸
11 0
咕噜咕噜wy
|
3天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
咕噜咕噜wy
14 0
Vue使用地图以及实现轨迹回放 附完整代码
老板这功能得加钱
|
3天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
老板这功能得加钱
7 0
向画
|
3天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
向画
6 0