vue组件化开发学习笔记-3-组件插槽

一，插槽的基础概念

在之前使用组件的时候，就是直接使用这个自定义的标签，而没有在里面增加内容。
例如：

Vue.component('test-tom',{data:function(){return {num:0}},template:`<div><div>TOM:{{num}}</div></div>`})var vm= new Vue({el:'#app'})

     <div id="app"><test-tom>这里没有信息</test-tom></div>

也就是这中间如果还想增加一些html结构，或者说是内容，则显示不出来，为了解决这一问题，又出现了组件插槽的概念，实际上就是在模板字符串中预留一个插槽，如果有额外的html结构，就可以插入到这里。

Vue.component('test-tom',{data:function(){return {num:0}},template:`<div><div>TOM:{{num}}</div><slot></slot></div>`})var vm= new Vue({el:'#app'})

<div id="app"><test-tom>这里没有信息</test-tom></div>

因为插槽是规定的，所以只能用
值得注意的是，slot里面还可以写默认参数，也就是使用自定义标签时，如果没有参数，则页面会显示默认参数：

<div id="app"><test-tom></test-tom></div><script type="text/javascript" src="js/vue.min.js"></script><script type="text/javascript">Vue.component('test-tom',{data:function(){return {num:0}},template:`<div><div>TOM:{{num}}</div><slot>这是定义的默认参数</slot></div>`})var vm= new Vue({el:'#app'})</script>

二，具名插槽的用法

在上文中，如果有思考就会发现，插槽的作用让组件可以增加一些自定义的html结构，以适应不同的业务需求，就像机械设计一样，比如滚珠丝杠的设计，螺母上的法兰有无，安装孔的位置，就需要对应不同的客户需求做出一定的变更。
但是,slot插槽存在巨大的局限性，它只有一个！也就是说，只能限定在固定的地方做出修改，这太low了，于是就有了具名插槽。
实际上模板字符串中定义多个插槽，使用自定义标签时，需要在哪个插槽中添加内容，就使用哪个插槽！

<div id="app"><test-tom><button slot="first">自行添加的按钮，放在定义名字的slot中</button>这是定义的默认参数会放到不定义名字的slot中</test-tom></div><script type="text/javascript" src="js/vue.min.js"></script><script type="text/javascript">Vue.component('test-tom',{data:function(){return {num:0}},template:`<div><div>TOM:{{num}}</div><slot></slot><input type="text" /><slot name="first"><slot></div>`})var vm= new Vue({el:'#app'})</script>

三，作用域插槽

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/base.css"/><style type="text/css">#app{width: 20%;margin: 200px auto;border: 1px solid #ccc;line-height: 30px;padding: 20px;}</style></head><body><div id="app"><fruit-list :list="list"><template slot-scope='slotprops'><!-- 通过template的slot-scope获取 子组件传过来的数据，存在slotprops对象中 --><strong v-if='slotprops.info.id==3' class="current">{{slotprops.info.name}}</strong><span v-else>{{slotprops.info.name}}</span></template></fruit-list></div><script type="text/javascript" src="js/vue.min.js"></script><script type="text/javascript">Vue.component('fruit-list',{props:['list'],template:`<div><li :key='item.id' v-for='item in list'><slot :info='item'></slot></li></div>`//通过:info='item把数据传递给父组件})var vm= new Vue({el:'#app',data:{list:[{id:1,name:'apple'},{id:2,name:'orange'},{id:3,name:'banana'}]}})</script></body>
</html>

vue组件化开发学习笔记-3-组件插槽相关推荐

四、Vue组件化开发学习笔记——父子组件通信，父级向子级传值（props）,子级向父级传值（自定义事件），slot插槽
一.父子组件的通信在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
Uniapp零基础开发学习笔记(5) -组件入门及容器组件使用
Uniapp零基础开发学习笔记(5) -组件入门及容器组件使用按照官网教程学习使用组件,并且重点把容器组件的应用进行了练习. 1.官网关于组件的介绍组件是视图层的基本组成单元,是一个单独且可复用的 ...
组件化开发之如何封装组件
自从React,Vue等前端框架在市面上大量使用之后,组件化开发逐渐成为了前端主流开发方式,今天我就在这里给大家分享一下在我们平时的开发中我们自己应该如何去封装组件.主要从以下三个方面给大家讲解: 什 ...
我的react组件化开发道路(二) 分页组件开发
2019独角兽企业重金招聘Python工程师标准>>> 上一篇文章主要写了关于react组件化开发的一些基本配置,慢慢的深入到每个组件的详细介绍中,今天我们就来分享react的分页组 ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
Vue全家桶之组件化开发
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 学习组件化开发,首先掌握组件化的开发思想,组件的注册方式,组件间的数 ...
Vue.js教程-组件化开发
Vue.js教程-组件化开发前言 Vue组件化什么是组件化 Vue单页面开发的解释组件化思想组件的使用原理实际开发中的使用-父子组件父子组件传递数据父传子-props用法子传父-th ...
Vue组件化开发 - 非常详细，不要错过哦~
源码示例链接:https://pan.baidu.com/s/1NEYDmLl2K7nNa-AKWtJqVA 提取码:2c7a 目标能够知道组件化开发思想能够知道组件的注册方式能够说出组件间的数 ...

vue组件化开发学习笔记-3-组件插槽

一，插槽的基础概念

二，具名插槽的用法

三，作用域插槽

vue组件化开发学习笔记-3-组件插槽相关推荐

最新文章

热门文章