Vue基础19之插槽

最新推荐文章于 2024-11-12 20:45:00 发布
最新推荐文章于 2024-11-12 20:45:00 发布
阅读量277 收藏
点赞数 1
分类专栏： 前端 Vue基础 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/129377884
版权

Vue基础19

插槽

不使用插槽

App.vue

<template>
  <div class="bg">
    <Category :listData="food"  title="美食"/>
    <Category :listData="games" title="游戏"/>
    <Category :listData="movies" title="电影"/>
  </div>
</template>

<script>
import Category from "@/components/Category";
export default {
  name: "App",
  components: {Category},
  data(){
    return{
        food:["火锅","烧烤","小龙虾","牛排"],
        games:["红色警戒","穿越火线","劲舞团","超级玛丽"],
        movies:["《教父》","《拆弹专家》","《你好，李焕英》","《无间道》"]
    }
  },
  methods:{
  }
}
</script>

<style lang="less">
.bg{
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
}
</style>

Category.vue

<template>
    <div class="bg">
      <h1>{{title}}</h1>
      <ul>
        <li v-for="(item,index) in listData" :key="index">
          {{item}}
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
      name: "Category",
      props:["listData","title"]
    }
</script>

<style scoped lang="less">
.bg{
  height: 500px;
  width: 300px;
  background-color: skyblue;
  display: inline-block;
  h1{
    background-color: orange;
    text-align: center;
  }
}
</style>

在这里插入图片描述

默认插槽：slot

<Category title="美食">
      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
</Category>

    <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充）   -->
    <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>

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

App.vue

<template>
  <div class="bg">
    <Category title="美食">
      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
    </Category>
    <Category title="游戏">
      <ul>
        <li v-for="(g,index) in games" :key="index">
          {{g}}
        </li>
      </ul>
    </Category>
    <Category title="电影">
      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
    </Category>
    <Category title="测试默认情况">
    </Category>
  </div>
</template>

<script>
import Category from "@/components/Category";
export default {
  name: "App",
  components: {Category},
  data(){
    return{
        food:["火锅","烧烤","小龙虾","牛排"],
        games:["红色警戒","穿越火线","劲舞团","超级玛丽"],
        movies:["《教父》","《拆弹专家》","《你好，李焕英》","《无间道》"]
    }
  },
  methods:{
  }
}
</script>

<style lang="less">
.bg{
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
  img{
    width: 100%;
  }
  video{
    width: 100%;
  }
}
</style>

Category.vue

<template>
  <div class="bg">
    <h1>{{title}}</h1>
    <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充）   -->
    <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
  </div>
</template>

<script>
    export default {
        name: "Category",
      props:["title"]
    }
</script>

<style scoped lang="less">
.bg{
  height: 500px;
  width: 300px;
  background-color: skyblue;
  display: inline-block;
  h1{
    background-color: orange;
    text-align: center;
  }
}
</style>

在这里插入图片描述

具名插槽

<Category title="美食">
      <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="footer"  href="http://www.baidu.com" class="more">更多美食</a>
</Category>

<!-- 定义多个插槽（挖个坑，等着组件的使用者进行填充）   -->
      <slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
      <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>

App.vue

<template>
  <div class="bg">
    <Category title="美食">
      <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="footer"  href="http://www.baidu.com" class="more">更多美食</a>
    </Category>
    <Category title="游戏">
      <ul slot="center">
        <li v-for="(g,index) in games" :key="index">
          {{g}}
        </li>
      </ul>
      <div slot="footer" class="foot">
        <a href="http://www.baidu.com/">单机游戏</a>
        <a href="http://www.baidu.com/">网络游戏</a>
      </div>
    </Category>
    <Category title="电影">
      <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      <!--  只有template标签可以使用v-slot:xxx 的形式   -->
      <template v-slot:footer>
        <div class="foot">
          <a href="http://www.baidu.com">经典</a>
          <a href="http://www.baidu.com">热门</a>
          <a href="http://www.baidu.com">推荐</a>
        </div>
        <h4 class="welcome">欢迎前来观影！</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "@/components/Category";
export default {
  name: "App",
  components: {Category},
  data(){
    return{
        food:["火锅","烧烤","小龙虾","牛排"],
        games:["红色警戒","穿越火线","劲舞团","超级玛丽"],
        movies:["《教父》","《拆弹专家》","《你好，李焕英》","《无间道》"]
    }
  },
  methods:{
  }
}
</script>

<style lang="less">
.bg{
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
  img{
    width: 100%;
  }
  video{
    width: 100%;
  }
  .more{
    display: block;
    text-align: center;
    margin-top: 10px;
  }
  .foot{
    display: flex;
    justify-content: space-around;
  }
  .welcome{
    text-align: center;
  }
}
</style>

Category.vue

<template>
    <div class="bg">
      <h1>{{title}}</h1>
      <!-- 定义多个插槽（挖个坑，等着组件的使用者进行填充）   -->
      <slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
      <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
    </div>
</template>

<script>
    export default {
      name: "Category",
      props:["title"]
    }
</script>

<style scoped lang="less">
.bg{
  height: 500px;
  width: 300px;
  background-color: skyblue;
  display: inline-block;
  h1{
    background-color: orange;
    text-align: center;
  }
}
</style>

在这里插入图片描述

作用域插槽

给使用者传值

<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充）   -->
      <slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>

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

<template scope="obj">
     <ul>
        <li v-for="(g,index) in obj.games" :key="index">
          {{g}}
        </li>
      </ul>
</template>

App.vue

<template>
  <div class="bg">
    <Category title="游戏">
      <template scope="obj">
        <ul>
          <li v-for="(g,index) in obj.games" :key="index">
            {{g}}
          </li>
        </ul>
      </template>
    </Category>

    <Category title="游戏">
      <template scope="{games}">
        <ol>
          <li style="color: red;" v-for="(g,index) in games" :key="index">
            {{g}}
          </li>
        </ol>
      </template>
    </Category>

    <Category title="游戏">
      <template slot-scope="{games}">
        <h4   v-for="(g,index) in games" :key="index">{{g}}</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "@/components/Category";
export default {
  name: "App",
  components: {Category},
}
</script>

<style lang="less">
.bg{
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
  img{
    width: 100%;
  }
  video{
    width: 100%;
  }
  .more{
    display: block;
    text-align: center;
    margin-top: 10px;
  }
  .foot{
    display: flex;
    justify-content: space-around;
  }
  .welcome{
    text-align: center;
  }
  h4{
    text-align: center;
  }
}
</style>

Category.vue

<template>
    <div class="bg">
      <h1>{{title}}</h1>
      <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充）   -->
      <slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
    </div>
</template>

<script>
    export default {
      name: "Category",
      props:["title"],
      data(){
        return{
          games:["红色警戒","穿越火线","劲舞团","超级玛丽"]
        }
      }
    }
</script>

<style scoped lang="less">
.bg{
  height: 500px;
  width: 300px;
  background-color: skyblue;
  display: inline-block;
  h1{
    background-color: orange;
    text-align: center;
  }
}
</style>

在这里插入图片描述

总结

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

子组件中：

<template>
	<div>
	<!-- 定义插槽 -->
	<slot>插槽默认内容</slot>
	</div>
</template>

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

<Category>
	<template slot="center">
	 	<div>html结构1</div>
	</template>
   
    <template v-slot:footer>
	 	<div>html结构2</div>
	</template>
</Category>

子组件中：

<template>
	<div>
	   <!-- 定义插槽-->
	   <slot name="center">插槽默认内容...</slot>
	   <slot name="footer">插槽默认内容...</slot>
	</div>
</template>

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

<Category>
	<template scope="scopeData">
	   <!--生成的是ul列表-->
	   <ul>
	   	<li v-for="g in scopeData.games" :key="g">{{g}}</li>
	   </ul>
	</template>
</Category>

<Category>
	<template slot-scope="scopeData">
	   <!--生成的是h4标题-->
	   	<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
	</template>
</Category>

子组件中：

<template>
    <div>
	   <slot :games="games"></slot>
	 </div>
</template>

<script>
	export default {
      name: "Category",
      props:["title"],
      data(){
        return{
          games:["红色警戒","穿越火线","劲舞团","超级玛丽"]
        }
      }
    }
</script>
VillanelleS
关注
专栏目录
vue插槽面试题_vue面试题总结
weixin_39706561的博客
12-21 491
1、vue双向绑定的实现原理2、js的继承和原型链3、es6语法箭头函数和普通函数的区别普通函数的this总是指向它的直接调用者。在严格模式下，没找到直接调用者，则函数中的this是undefined。在默认模式下(非严格模式)，没找到直接调用者，则函数中的this指向window。箭头函数中的this始终指向其父级作用域中的this。换句话说，箭头函数会捕获其所在的上下文的this值，作为自己的...
vue插槽 校验表单_Vue组件化实战（上）
weixin_34901388的博客
01-26 720
学习目标：1、深入理解Vue的组件化机制2、掌握Vue组件化常用技术3、能够设计并实现多种类型的组件4、加深对一些Vue原理的理解5、学会看开源组件源码知识要点：1、组件通信方式2、组件复会3、组件构造函数和实例化4、渲染函数5、组件挂载6、递归组件运行环境：node:12.xvue：2.6.xvue-cli:4.x知识点：组件化：vue组件系统提供了一种抽象，让我们可以使用独立可服用...
Vue 组件基础——插槽
qq_40930841的博客
05-05 1335
标签定义插槽，从而在组件中预留占位符。<slot>插槽的默认内容
Vue3 _ 19. Vue 插槽
胖子胖子大胖子的博客
07-19 147
一、什么是插槽 来看一下官方是如何定义的 Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自Web Components 规范草案，将<slot>元素作为承载分发内容的出口。 可以说，完全看不懂。。。 这里我给大家简单说一下，这个插槽，其实就是一个占位置的坑，把坑挖好，之后其他的人没有办法使用，到时候我们可以动态做替换，把这个坑换成其他的东西。 二、HelloWorld 我们这里来看一个简单的例子，感受一下插槽是如何使用的。 首先，我们去定义一个非常简单的组件...
vue基础用法&基础原理整理
热门推荐
hangao233的博客
04-06 6万+
vue基础用法&基础原理整理 1. vue基础知识和原理 1.1 初识Vue 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 demo容器里的代码被称为【Vue模板】 Vue实例和容器是一一对应的 真实开发中只有一个Vue实例，并且会配合着组件一起使用 {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
懂个锤子Vue 自定义指定、插槽：
Java.慈祥
07-31 566
是Vue.JS提供的一组内置的功能指令，它们以v-这些指令使得开发者能够以声明式的方式实现数据与视图的绑定，从而简化了DOM操作；自定义指令：是Vue.js实现对DOM元素的定制化操作，这种机制为开发者提供了直接操作控制DOM能力；从而在不深入组件内部逻辑的情况下，增加或修改元素的行为；自定义指令分为： 全局注册、局部注册；在Vue中让指令在整个应用程序中可用的方法，通过调用方法完成；Vue的静态方法指令名称v-指令名称；定义对象：该对象内包含指令执行的生命周期钩子函数；指令第一次绑定到元素时触发。
Vue19_slot插槽
linxwx的博客
03-18 104
组件的插槽是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么
【Vue3】slot 插槽全家桶
小秀的博客
08-08 387
插槽（Slots）是 Vue.js 框架中的一个功能，允许在组件内部预留一些可替换的内容。通过插槽，可以给父组件填充模板代码，让父组件向子组件传递自定义的内容，以便在子组件中进行展示或处理。
vue3具名插槽&动态插槽
m0_50884068的博客
09-30 424
上代码 A页面 <xuanzeqi> <template v-slot:content> <h1>我是谁</h1> <h1>谁是我</h1> <h1>我到底是谁</h1> </template> </xuanzeqi> import xuanzeqi from '@/views/xuanzeqi'
vue-插槽作用域实用场景
qq_45030898的博客
10-11 428
vue-插槽作用域实用场景
vue基础day04-v-if、v-else及插槽solt的使用
m0_52618824的博客
06-27 1410
一、v-if、 v-else、 v-else-if的用法 代码实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content
vue2 作用域插槽slot-scope详解
dengduoan5084的博客
12-27 1284
插槽分为单个插槽，具名插槽，还有作用域插槽，前两种比较简单这里就不赘述了，今天的重点是讨论作用域插槽。 简单来说，前两种插槽的内容和样式皆由父组件决定，也就是说显示什么内容和怎样显示都由父组件决定； 作用域插槽的样式由父组件决定，内容却由子组件控制。简单来说：前两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。 注意:在 2.5.0+，slot-scope不再限制在&lt...
初识 Vue（19）---（Vue 中使用插槽(slot)）
姜皓的博客
07-28 952
Vue 中使用插槽(slot) 案例：子组件中的一部分内容是根据父组件传递来的 DOM 来进行显示 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue 中使用插槽(slot)&lt;/title&gt; &a
Vue中的常用指令
m0_62388400的博客
11-12 712
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
第四十二章 Vue中使用mutations修改Vuex仓库数据
Calvin的博客
11-11 622
在Vue中，明确vuex同样遵循单向数据流，即组件中不能直接修改仓库的数据，我们可以通过 strict: true 可以开启严格模式，防止在组件中非法修改仓库数据。(错误写法)在Vue中，组件想要修改Vuex的数据，可以通过Vue提供的mutations来实现。本章节我们将通过掌握mutations的操作流程，来修改state数据。(state数据的修改只能通过mutations )1.2. mutations修改数据基本步骤。
『VUE』24. 组件事件之子组件传递数据给父组件（详细图文注释）
最新发布
MZH
11-12 519
『VUE』24. 组件事件之子组件传递数据给父组件（详细图文注释）
前端基础面试题·第四篇——Vue（其三）
2301_76380626的博客
11-09 818
Vue中组件定义式可以为其添加一个name属性，这个属性是组件的别名。当时组件被渲染时，Vue DevTools 会显示组件的名称，方便开发者调试，增强调试体验。当组件需要在内部调用渲染自己本身时，需要通过name属性来指定组件名称，否则Vue会报错。给组件命名后，我们可以通过全局注册，在全应用范围内使用该组件。方便了组件的使用，提高了组件复用性。使用keep-alive包裹动态组件时，可以通过include和exclude属性来指定哪些组件需要缓存，哪些组件不需要缓存。
Vue实际应用之无限滚动、css之&、混合宏和~
swj的博客
11-12 451
今天来点实际的，看起来简单但是给我们代码带来更好的效果，一起来看看吧！先来介绍一个三方库。
【开源免费】基于SpringBoot+Vue.JS美发门店管理系统（JAVA毕业设计）
customer08的博客
11-11 1004
基于Vue.js和SpringBoot开发的美发门店管理系统是一个功能全面的解决方案，旨在为美发店提供高效的日常运营支持。该系统分为两个主要部分：管理后台和用户网页端，以满足不同用户角色的需求。
Vue面试题精华：从基础到高级深度解析
34. **slot插槽**：Vue中的插槽机制用于组件内容分发，让父组件可以插入自定义内容到子组件特定位置。 35. **v-if和v-for不建议一起使用**：因为同时使用可能导致性能问题和预期外的行为，应优先考虑优化结构。 36...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值