Vue学习笔记之11-slot插槽
slot插槽
为什么要使用slot插槽
- 组件的插槽是为了让我们封装的组件更加具有扩展性
- 让使用者可以灵活地决定组件内部的内容到底展示什么
- 网页和网页间每一个组件有很多的区别, 也有很多共性, 如果我们为每一个网页都去单独地封装一个组件是不合适的, 所以我们需要slot插槽
如何封装一个灵活的组件
- 将共性(相同的地方)抽取放到组件中, 将不同的地方暴露为插槽
- 预留了插槽, 就可以让使用者根据自己的需求, 决定插槽内的内容
slot的基本使用
- 在子组件中, 用特殊的元素标签slot就可以为子组件创建一个插槽
- 插槽中插入的内容是什么由父组件来决定
slot的注意点
- slot的默认值, 在父组件中没有写入要插入的内容的话, 就会默认显示slot的默认值
- 如果父组件中一次性插入多个元素, 那么所有的元素都会进行替换
<body><div id="app"><!-- 在组件的标签中填入要替换slot占位的元素 --><cpn><button>按钮</button></cpn><cpn><span>我是span</span></cpn><!-- 如果一次性填入多个替换的元素, 所有的替换元素都会进行替换 --><cpn><i>我是i</i><p>我是替换的p</p><span>我是替换的span</span></cpn><!-- 如果标签内没有填入要替换的slot占位的元素, slot会使用默认的元素替换 --><cpn></cpn><cpn></cpn><cpn></cpn></div><template id="cpn"><div><h2>我是h2</h2><p>我是p</p><!-- 在组件中使用solt标签占位 --><!-- 在slot标签中填入默认的元素, 默认元素会在子组件标签没有填入替换的元素的时候显示出来 --><slot><button>我是默认的按钮</button></slot></div></template><script>const app = new Vue({el: "#app",components: {cpn: {template: "#cpn"}}})</script>
</body>
具名slot的使用
- 当子组件的功能复杂时, 子组件的插槽可能由很多个, 那么在父组件中给插槽插入内容的时候, 如何区分插入的是哪一个插槽呢?
- 此时需要给插槽起一个名字, 添加一个name属性
- 然后在插入的元素中添加slot属性, 值为需要替换的插槽的name值
<body><div id="app"><!-- 使用子组件的时候, 给需要替换的添加slot属性, 值为需要替换的slot标签的name值, 即可定向替换元素 --><cpn><button slot="center">替换中间的</button></cpn></div><template id="cpn"><div><!-- 给插槽标签添加name属性 --><slot name="left"><span>左边</span></slot><slot name="center"><span>中间</span></slot><slot name="right"><span>右边</span></slot></div></template><script>const app = new Vue({el: "#app",components: {cpn: {template: "#cpn"}}})</script>
</body>
编译的作用域
- 在组件模板中使用的所用东西, 来自该组件
- 官方的准则: 父组件模板的所有东西都会在父级作用域内编译, 子级组件模板的所有东西都会在子级作用域内编译
<body><div id="app"><!-- 在这里使用的isShow数据是来自根组件的,因为这里是app根组件 --><cpn v-show="isShow"></cpn></div><template id="cpn"><div><!-- 在这里使用的isShow数据是来自cpn组件的, 因为这里是cpn子组件 --><h2>我是标题</h2><p>我是内容</p><span v-show="isShow">我是span</span></div></template><script>const app = new Vue({el: "#app",data: {isShow: true},components: {cpn: {template: "#cpn",data() {return {isShow: false}}}}})</script>
</body>
作用域插槽的使用
- 总结起来就是一句话, 父组件替换插槽的标签, 但是内容由子组件来提供
- 就是父组件来决定如何渲染子组件的内容
- 如何使用作用域插槽
- 子组件模板中, 通过给slot标签添加v-bind:自定义名称=“想要暴露的数据” 属性来发送子组件的数据
- 在父组件中的子组件标签中嵌套一个一个template标签(Vue2.5.x以后可以使用其他的标签比如div等)
- 在这个template标签中添加 slot-scope=“也是自定义的名字” 来接收slot标签发送的数据
- 在template标签内就可以使用子组件发送来的数据了
<body><div id="app"><!-- 默认是按照子组件模板中设定的模板渲染 --><cpn></cpn><!-- 如果想在父组件中其他的形式展示子组件的内容, 就要使用作用域插槽 --><cpn><!-- 在子组件标签中嵌套一个template标签(Vue2.5.x以后可以使用其他的标签比如div等) --><!-- 在该标签中添加 slot-scope="也是自定义的名字" 来接收slot标签发送的数据 --><template slot-scope="acceptdata"><!-- 在这个标签内就可以使用子组件发送来的数据了 --><!-- <span v-for="item in acceptdata.cpndata"> {{item}} - </span> --><span>{{acceptdata.cpndata.join(" - ")}}</span></template></cpn></div><template id="cpn"><div><!-- 通过slot标签中添加 v-bind:自定义名称="想要暴露的数据" 属性来发送子组件的数据 --><slot :cpndata="pLanguages"><ul><li v-for="item in pLanguages">{{item}}</li></ul></slot></div></template><script>const app = new Vue({el: "#app",components: {cpn: {template: "#cpn",data() {return {pLanguages: ["JavaScript", "C++", "C#", "python"]}}}}})</script>
</body>
Vue学习笔记之11-slot插槽相关推荐
- Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录 一.参考资料 二.运行环境 三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名 四.GitHu ...
- Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值 注意点 子组件给父组件传值 父组件接受子组件的传值 通过函数 组件的自定义事件 事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
- 狂神说 vue学习笔记
vue学习笔记 文章目录 vue学习笔记 一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期 二.V ...
- Vue学习笔记---------Vue2
Vue学习笔记---------Vue2 1. Hello,world! 插值语法: 用 {{ xxx }} 插入一个值 ,该值在data中自定义内容. <body><div id= ...
- Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
- day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记 组件 生命 ...
- Vue学习笔记01——Vue开发基础
一.Vue实例配置选项 选项 说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
- Vue学习笔记（二）组件化和模块化
Vue学习笔记(二)组件化和模块化 前言 组件化 什么是组件化 1.基础使用 2.全局组件和局部组件 3.语法糖和模板抽离 4.组件的data为什么是函数 5.父子组件 5.1 父子组件 5.2 父子 ...
- Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
- vue学习简记（十）插槽
vue学习简记(十) 插槽 作用 分类 使用方式 默认插槽 具名插槽 作用域插槽 插槽 Vue 实现了一套内容分发的 API,将元素作为承载分发内容的出口,这是vue文档上的说明.具体来说,slot就 ...
最新文章
- 三维点云语义分割总览
- python中文软件-Python编程软件下载
- 监测div大小变化_如何让div大小随窗口大小变化
- 使用Java VisualVM分析您的应用程序
- Maven排除项目中同名不同版本的jar
- html编辑器查找与替换,织梦kindeditor文本编辑器增加“查找替换”功能
- 开源大数据：Apache Pulsar
- cad2017怎么改变选择方式_诠网科技｜企业网络推广方式要怎么选择？
- Tensorflow API（二）
- 主流数据库之MySQL函数和MySQL数据操作基础知识及示例
- libaio介绍和使用
- python中html图片显示不出来,jupyter notebook中图片显示不出来的解决
- 用Python算带有进度条的圆周率
- 【转】大数据【五十八】探索MapReduce过程及分组详解
- Python实战回归模型-消费者人群画像-信用智能评分（基于中国移动用户数据）
- 访问学者美国访学必须知道十大注意事项
- system()函数详解
- Qt中根据pc屏幕分辨率按比例修改窗口的大小
- 基于STM32F103的智能门锁系统
- C语言自动分配宿舍问题