vue 组件 Vue.component 用法
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白。
后面越来越发现插槽的好用。
1、插槽内可以放置什么内容?
2、默认插槽
3、具名插槽
4、作用域插槽
一、插槽内容
一句话:插槽内可以是任意内容。
<div id="app"><child-component></child-component></div>
<script>Vue.component('child-component',{template:`<div>Hello,World!</div>`})let vm = new Vue({el:'#app',data:{}})
</script>
<child-component>你好</child-component>
输出内容还是在组件中的内容,在 内写的内容没起作用。
这就是插槽出现的作用。
Vue.component('child-component',{template:`<div>Hello,World!<slot></slot></div>`})
到现在,我们知道了什么是插槽:
插槽就是Vue实现的一套内容分发的API,将元素作为承载分发内容的出口。
这句话的意思就是,没有插槽的情况下在组件标签内些一些内容是不起任何作用的,当我在组件中声明了slot元素后,在组件元素内写的内容
就会跑到它这里了!
作用域插槽
之前一直没搞懂作用域插槽到底是什么!!!
说白了就是我在组件上的属性,可以在组件元素内使用!
先看一个最简单的例子!!
我们给元素上定义一个属性say(随便定义的!),接下来在使用组件child,然后在template元素上添加属性slot-scope!!随便起个名字a
我们把a打印一下发现是 {“say” : “你好”},也就是slot上面的属性和值组成的键值对!!!
这就是作用域插槽!
我可以把组件上的属性/值,在组件元素上使用!!
<div id="app"><child><template slot-scope="a"><!-- {"say":"你好"} -->{{a}}</template></child>
</div>
<script>Vue.component('child',{template:`<div><slot say="你好"></slot></div>`})let vm = new Vue({el:'#app',data:{}})
</script>
<div id="app"><child :lists="nameList"><template slot-scope="a">{{a}}</template></child>
</div>
<script>Vue.component('child',{props:['lists'],template:`<div><ul><li v-for="list in lists"><slot :bbbbb="list"></slot></li></ul></div>`})let vm = new Vue({el:'#app',data:{nameList:[{id:1,name:'孙悟空'},{id:2,name:'猪八戒'},{id:3,name:'沙和尚'},{id:4,name:'唐僧'},{id:5,name:'小白龙'},]}})
</script>
这样我就可以在这元素上随便玩了啊!!
当id等于1的时候,我前面加个你好。
我可以随便根据这个对象的属性值进行操作!
<child :lists="nameList"><template slot-scope="a"><div v-if='a.bbbbb.id==1'>你好:<span>{{a.bbbbb.name}}</span></div><div v-else>{{a.bbbbb.name}}</div></template></child>
最后!如果用过elementui的同学,一定知道表格就是这样来的!!
表格的本质就是这样!
vue 组件 Vue.component 用法相关推荐
- html页面渲染vue组件,Vue组件页面渲染的基本流程
html: 组件页面渲染的基本流程 main.js: import Vue from "vue"; import Home from "./home.vue"; ...
- Vue组件+Vue动画
目录 Vue选项 自定义指令 过滤,管道filters 全局组件 局部组件 props传递参数 props细节 组件传参父传子 组件传值总结 组件的插槽(嵌套) 具名插槽 弹框组件的使用htt ...
- vue组件+vue插件的创建和使用
一.vue组件的概念 是一个可以重复使用的Vue实例,它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签.因为组件是可复用的Vue实例,所以它们与new Vue ...
- Vue组件间通信:一个例子学会Vue组件-Vue.js学习总结)(转载)
详情请点击 http://www.jianshu.com/p/9ad1ba89a04b 转载于:https://www.cnblogs.com/zhongjiang/p/6694459.html
- vue组件可视化_Vue HTML5音频可视化组件
vue组件可视化 视听 (vue-audio-visual) VueJS audio visualization components. VueJS音频可视化组件. Vue HTML5 audio v ...
- 【前端——vue】:过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由
一.过滤器 1.过滤器Filters(只能在vue2中使用) p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面.竖线代表要调用过滤器. 过滤器函数必须定义到filters节点 ...
- 【Vue】Vue学习笔记——UI组件库和常用插件
文章目录 6. UI组件库和常用插件 6.1 Element-ui 6.2 Vue-router 6.2.1 基本用法 6.2.2 跳转 6.2.3 路由嵌套 6.2.4 路由参数传递 6.3 Axi ...
- vue组件 .vue_Vue列车时刻表组件
vue组件 .vue 训练时间表 (vue-train-timetable) Vue Train Timetable Component. Vue列车时刻表组件. View Demo 查看演示 Dow ...
- 【Vue 组件化开发 三】父组件给子组件传递数据、组件通信(父传子、子传父)、父访问子(children、ref)、动态组件(is、component)
目录 一.前言 完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
最新文章
- Ubutu16.04+Cuda9.2/9.0+Cudnn7.12/7.05+TensorFlow-gpu-1.8/1.6
- 【BZOJ-3262】陌上花开 CDQ分治(3维偏序)
- Python:数据编码与处理
- Jquery$和$$的区别
- 文件上传案例的客户端
- SAP Spartacus CmsService.Components数据结构
- 改变numpy的大小_Numpy入门详细教程
- python3.7源码剖析——python对象
- vue 创建图片坐标点_Vue Echarts 显示地图且根据坐标设置标注点
- 枚举算法(百钱百鸡问题 C语言)
- Java如何实现代理服务器?
- 他们说我根本不了解企业运作
- 黑客游戏系列--------第二关
- XMU 1615 刘备闯三国之三顾茅庐(三) 【欧拉函数+快速幂+欧拉定理】
- 如何让搜狗收录方法分享
- POI生成word文档完整案例及讲解
- 高等数学(第七版)同济大学 习题9-4 (前11题)个人解答
- <Python的输入、输出、注释>——《Python》
- Visiom Transformer 代码实现--ViT
- linux ftp主动和被动模式切换命令,Linux iptables配置FTP的主动和被动模式