前端vue入门(纯代码)19

不管何时何地，永远保持热爱，永远积极向上！！！

【21.Vue中的插槽slot】

  • 问题：插槽（slot）是什么？兄弟们也可以点这里去看这位兄弟的博客，写的比我详细！！！

    • 【理解1】：插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。
    • 【理解2】：插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的；而插槽在哪里显示就由子组件来进行控制。

  • 问题：三种插槽（slot）：

    • 1、默认插槽 

      <slot></slot>

    • 2、具名插槽 

       <slot name="名称"></slot>

    • 3、作用域插槽 

      <slot ：自定义 name = data 中的属性对象></slot>

1.默认插槽slot

  • 【父组件：App；子组件：Category】
  • 在子组件：Category中定义一个默认插槽。
<template><div class="about"><h1>这里是子组件Category</h1><!-- 定义一个默认插槽【坑】 --><slot></slot></div>
</template>
  • 在App父组件中的子组件<category>--这里东西放入子组件的插槽中--</category>。
<template><div class="container"><h1>这里是父组件</h1><category title="美食"><img src="http://rwt9uxba6.hd-bkt.clouddn.com/9999.png" /></category></div>
</template>
  • 但是，如果在子组件：Category中定义多个默认插槽【比如：两个默认插槽】。

那么，就会把要放入插槽中的东西复制几份【比如：两个默认插槽就复制两份】

<template><div class="about"><h1>这里是子组件Category</h1><!-- 定义一个默认插槽【坑】 --><slot></slot><slot></slot></div>
</template>
  • 自己的例子展示：

上面案例完整代码：

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入vue-resource插件
// import vueResource from 'vue-resource';
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
// Vue.use(vueResource)//创建vm
new Vue({el:'#app',render: h => h(App),// 生命周期钩子beforeCreate中模板未解析，且this是vmbeforeCreate() {// this:指的是vmVue.prototype.$bus = this  //安装全局事件总线$bus}
})

App.vue

<template><div class="container"><category title="美食"><img src="http://rwt9uxba6.hd-bkt.clouddn.com/9999.png" /></category><category title="游戏"><ul><li v-for="(g, index) in games" :key="index">{{ g }}</li></ul></category><category title="电影"><videosrc="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video></category></div>
</template><script>
import Category from './components/Category';
export default {name: 'App',components: { Category },data() {return {foods: ['火锅', '烧烤', '小龙虾', '牛排'],games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],films: ['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》',],};},
};
</script>
<style scoped>
.container {/* 弹性布局 */display: flex;/* 弹性项目平均分布在该行上，两边留有一半的间隔空间。 */justify-content: space-around;
}
</style>

Category.vue

<template><div class="category"><h3>{{ title }}分类</h3><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --><slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot></div>
</template><script>
export default {name: 'Category',// 父组件给子组件传递数据：propsprops: ['title'],
};
</script><style scoped>
.category {background-color: aquamarine;width: 200px;height: 300px;
}
h3{background-color: orange;/* 为文本或img标签等一些内联对象（或与之类似的元素）的居中。 */text-align: center;
}
img {/* 占父元素的比例 */width: 100%;
}
video {/* 占父元素的比例 */width: 100%;
}
</style>

2.具名插槽slot

  • 什么是具名插槽？

其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据name来填充对应的内容。

<slot name="one"></slot>
<slot name="two"></slot>

  • 【父组件：App；子组件：Category】

  • 在子组件：Category中定义两个具名插槽。

<template><div class="about"><h1>T这里是子组件Category</h1><!-- 给插槽加了个name属性，就是所谓的具名插槽了 --><slot name="one"></slot><slot name="two"></slot></div>
</template>
  • 在App父组件中的子组件<category>【这里东西放入子组件的插槽中，有插槽名的一一对应放入】</category>。
<category title="美食"><template slot="one"><p>one插槽</p></template><template  slot="two">two插槽</template>
</category>
  • 【注意】：要放入具名插槽的结构，最好用</template slot="插槽名">包裹起来，好处是：</template>不渲染真实DOM，结构少了一层，并且还可以用这种写法【v-slot:插槽名】：<template v-slot:插槽名>。

具名插槽案例效果展示：

具名插槽案例的完整代码：

  • <video controls></video>：video标签里面的controls属性是控制视频播放的按钮 。

父组件App.vue

<template><div class="container"><category title="美食"><img slot="center" src="http://rwt9uxba6.hd-bkt.clouddn.com/9999.png" /><a slot="footer" href="http://www.atguigu.com">更多美食</a></category><category title="游戏"><ul slot="center"><li v-for="(g, index) in games" :key="index">{{ g }}</li></ul><div class="footer" slot="footer"><a href="http://www.atguigu.com">单机游戏</a><a href="http://www.atguigu.com">网络游戏</a></div></category><category title="电影"><!-- controls:控制视频的播放按钮 --><video controlsslot="center"src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video><template slot="footer"><div class="footer"><a href="http://www.atguigu.com">经典</a><a href="http://www.atguigu.com">热门</a><a href="http://www.atguigu.com">推荐</a></div><h4>欢迎前来观影</h4></template></category></div>
</template><script>
import Category from './components/Category';
export default {name: 'App',components: { Category },data() {return {foods: ['火锅', '烧烤', '小龙虾', '牛排'],games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],films: ['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》',],};},
};
</script>
<style scoped>
.container ,.footer{/* 弹性布局 */display: flex;/* 弹性项目平均分布在该行上，两边留有一半的间隔空间。 */justify-content: space-around;
}
h4{/* 为文本或img标签等一些内联对象（或与之类似的元素）的居中。 */text-align: center;
}
</style>

子组件Category.vue

<template><div class="category"><h3>{{ title }}分类</h3><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --><slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot><slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot></div>
</template><script>
export default {name: 'Category',// 父组件给子组件传递数据：propsprops: ['title'],
};
</script><style scoped>
.category {background-color: aquamarine;width: 200px;height: 300px;
}
h3{background-color: orange;/* 为文本或img标签等一些内联对象（或与之类似的元素）的居中。 */text-align: center;
}
img {/* 占父元素的比例 */width: 100%;
}
video {/* 占父元素的比例 */width: 100%;
}
</style>

3.作用域插槽【v-slot指令】

  • 什么是作用域插槽？【也可以点击此处去官方文档看】

作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。

作用域插槽就是实现在子组件自行决定自己要显示什么内容。 并且，能够让要放入插槽的内容能够访问子组件中才有的数据。【一种子给父通信的方法】

  • 可以让要放入模板中的数据一样，但是HTML结构不一样：如下面的案例中的三个小卡片放入的data一样，但是样式不一样。【一个无序、一个有序且字体有颜色、还有一个应用了后h4字体样式】

  • 要放入插槽的内容指的是：父组件中<category>里面的包裹的东西

<category title="美食"><template v-slot="childrenDate"><p>one插槽</p></template><div scope="childrenDate"><p>one插槽</p></div>    
</category>
  • 此处的v-slot指令可以替换成scope和slot-scope
  • 【注意 】v-slot 只能添加在 <template> 上
  • 【模板】子组件Category要传给父组件的data:
<slot :自定义的name=子组件data中的属性或对象></slot>

  • <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

  • 【例子：Category.vue】子组件Category要传给父组件的data:

<slot :childrenDate=games></slot>

data() {return {games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],};
},
  • 【例子:App.vue】父组件App要接收子组件传过来的data:
<category title="游戏"><template scope="haha"><ul><li v-for="(g,index) in haha.childrenDate" :key="index">{{g}}</li></ul></template>
</category>

补充一个点：

  • 【例子：Category.vue】子组件Category要传给父组件的data有两个参数:
<slot :dataOfCategory="games" :Msg="nihao"></slot>

data() {return {games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],nihao:'我是伍六七，我喜欢梅小姐！',};
},
  • 【例子:App.vue】父组件App要接收子组件传过来的数据haha，我们看一下它的到底是个什么玩意？？？
<category title="游戏"><template scope="haha"><ul><li v-for="(g, index) in haha.dataOfCategory" :key="index">{{ g }}</li></ul><button @click="CategoryDate(haha)"><h2>点击查看子组件传过来的数据</h2></button></template>
</category>

methods: {CategoryDate(haha) {console.log(haha);},
},

结果展示：

有点看不清，那就月下观鸟：

具名插槽案例效果展示：

完整代码：

App.vue组件

<template><div class="container"><!-- 让子组件展示的数据是无序的 --><category title="游戏"><template scope="haha"><ul><li v-for="(g, index) in haha.dataOfCategory" :key="index">{{ g }}</li></ul><button @click="CategoryDate(haha)"><h2>点击查看子组件传过来的数据</h2></button></template></category><!-- 让子组件展示的数据是有序的 --><category title="游戏"><!-- 对象的解构赋值 --><template slot-scope="{ dataOfCategory }"><ol><listyle="color: orange"v-for="(g, index) in dataOfCategory":key="index">{{ g }}</li></ol></template></category><category title="游戏"><template v-slot="hello"><h4 v-for="(g, index) in hello.dataOfCategory" :key="index">{{ g }}</h4></template></category></div>
</template><script>
import Category from './components/Category';
export default {name: 'App',components: { Category },methods: {CategoryDate(haha) {console.log(haha);},},
};
</script>
<style scoped>
.container,
.footer {/* 弹性布局 */display: flex;/* 弹性项目平均分布在该行上，两边留有一半的间隔空间。 */justify-content: space-around;
}
h4 {/* 为文本或img标签等一些内联对象（或与之类似的元素）的居中。 */text-align: center;
}
button{/* 为文本或img标签等一些内联对象（或与之类似的元素）的居中。 */text-align: center;background-color: blueviolet;
}
</style>

Category.vue组件

<template><div class="category"><h3>{{ title }}分类</h3><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --><slot :dataOfCategory="games" :Msg="nihao">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot></div>
</template><script>
export default {name: 'Category',// 父组件给子组件传递数据：propsprops: ['title'],data() {return {games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],nihao:'我是伍六七，我喜欢梅小姐！',};},
};
</script><style scoped>
.category {background-color: aquamarine;width: 200px;height: 300px;
}
h3{background-color: orange;/* 为文本或img标签等一些内联对象（或与之类似的元素）的居中。 */text-align: center;
}
img {/* 占父元素的比例 */width: 100%;
}
video {/* 占父元素的比例 */width: 100%;
}
</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. 作用域插槽：

      1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

      2. 具体编码：【见上面的案例的代码】

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/2794.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Flink】Flink 中的时间和窗口之水位线(Watermark)

【Flink】Flink 中的时间和窗口之水位线(Watermark)

1. 时间语义 这里先介绍一下什么是时间语义&#xff0c;时间语义在Flink中是一种很重要的概念&#xff0c;下面介绍的水位线就是基于时间语义来讲的。 在Flink中我们提到的时间语义一般指的是事件时间和处理时间&#xff1a; 处理时间(Processing Time)&#xff0c;一般指执…
阅读更多...
《深入浅出SSD：固态存储核心技术、原理与实战》----学习记录(三)

《深入浅出SSD：固态存储核心技术、原理与实战》----学习记录(三)

第3章　SSD存储介质&#xff1a;闪存 3.1 闪存物理结构 3.1.1 闪存器件原理 1978年诞生的世界上第一块固态硬盘就是基于DRAM的。但由于保存在DRAM中的数据有掉电易失性&#xff0c;当然还有成本因素&#xff0c;所以现在的固态硬盘一般都不采用DRAM&#xff0c;而是使用闪存…
阅读更多...
【mysql环境】mysql的多种安装方法、环境配置总结

【mysql环境】mysql的多种安装方法、环境配置总结

目录 第一步&#xff1a;mysql安装方法 方法一&#xff1a; 方法二&#xff1a; 方法三&#xff1a; 第二步&#xff1a;配置环境变量 第三步&#xff1a;验证是否配置成功 第一步&#xff1a;mysql安装方法 方法一&#xff1a; 下载MSI安装程序&#xff0c;进行mysql的…
阅读更多...
C++笔记之各种sleep方法总结

C++笔记之各种sleep方法总结

C笔记之sleep总结 —— 2023年4月9日 小问 上海 code review 文章目录 C笔记之sleep总结1.std::this\_thread::sleep\_for()附&#xff1a;std::this\_thread::sleep\_for(std::chrono::duration) 2.std::this\_thread::sleep\_until()附&#xff1a;std::this\_thread::sleep\…
阅读更多...
Microsoft Edge插件推荐：CSDN·浏览器助手

Microsoft Edge插件推荐：CSDN·浏览器助手

文章目录 1.简介2.安装3.总结 今天来给大家分享一个超级好用的Microsoft Edge插件&#xff0c;名为CSDN浏览器助手 1.简介 CSDN浏览器助手是一款集成本地书签、历史记录与 CSDN搜索(so.csdn.net) 的搜索工具&#xff0c;可以自定义Microsoft Edge的新标签页&#xff0c;还可以…
阅读更多...
UDP SocketAPI

UDP SocketAPI

1、TCP与UDP区别 TCP&#xff1a;有连接&#xff0c;可靠传输&#xff0c;面向字节流&#xff0c;全双工 UDP&#xff1a;无连接&#xff0c;不可靠传输&#xff0c;面向数据报&#xff0c;全双工 2、UDP sockeAPI的核心类 DatagramSocket&#xff1a;相当于对socket文件进…
阅读更多...
OpenStack（3）--vxlan网络实战

OpenStack（3）--vxlan网络实战

目录 一、ML2配置文件 二、上传cirros镜像 三、创建vxlan10网络 四、创建实例/同vxlan通信测试 五、不同vxlan通信测试 5.1 新建vxlan11 5.2 新建路由/添加路由接口 5.3 不同vxlan通信测试 5.4 qemu-vnc报错 六、深度剖析vxlan 七、认识 Bridge br-ex、Bridge br-in…
阅读更多...
基于matlab基于预训练的膨胀双流卷积神经网络的视频分类器执行活动识别（附源码）

基于matlab基于预训练的膨胀双流卷积神经网络的视频分类器执行活动识别（附源码）

一、前言 此示例首先展示了如何使用基于预训练的膨胀 3-D &#xff08;I3D&#xff09; 双流卷积神经网络的视频分类器执行活动识别&#xff0c;然后展示了如何使用迁移学习来训练此类视频分类器使用 RGB 和来自视频的光流数据 [1]。 基于视觉的活动识别涉及使用一组视频帧预…
阅读更多...
PHY芯片的使用（一）之基本概念讲解（MII相关）2

PHY芯片的使用（一）之基本概念讲解（MII相关）2

今天想和大家交流一下MAC和PHY之间的接口MII。 MII(Media Independent Interface )是介质无关接口。MII接口定义了在MAC层和物理层之间传送数据和控制状态等信息的接口&#xff0c;它是10M和100M兼容的接口&#xff0c;经过扩展后还可以用于1000M的MAC层与物理层的接口&#x…
阅读更多...
【国产复旦微FMQL45教程】-小试牛刀之LED

【国产复旦微FMQL45教程】-小试牛刀之LED

本教程采用 FMQL7045 FPGA开发板来完成整个试验&#xff0c;板卡照片如下&#xff1a; 具有丰富的接口资源&#xff0c;系统框图如下&#xff1a; 本教程用于完成基于Vivado的FMQL45的LED实验&#xff0c;目标是能够将这款开发板PL端先跑起来。 对于纯 PL 设计&#xff0c;我们…
阅读更多...
计算机网络—局域网

计算机网络—局域网

文章目录 ARP协议以太网以太网帧结构交换机交换机的端口划分 PPP协议 MAC地址 封装在链路帧中的地址&#xff0c;作为每一个接口的地址。&#xff08;一般是48bit大小&#xff09; MAC地址是刻画到我们物理接口上的&#xff0c;我们的网卡一旦出厂之后就会携带一个唯一的物理地…
阅读更多...
SAP 后台配置之FM基金管理篇

SAP 后台配置之FM基金管理篇

SAP FM基金管理后台配置及应用 1 二话不说先上后台配置&#xff0c;能跑通为先1.1 基础设置1.1.1 维护财务管理区1.1.2 分配财务管理区1.1.3 激活全局基金管理功能1.1.4 定义全局参数1.1.5 定义编号区间编号并分配1.1.6 创建更改层次变式1.1.3 激活科目分配元素1.1.4 设置允许空…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023