Vue.js中组件中的slot实例详解
Vue组件中的slot
slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样
<template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p> </div> </template>
在应用的时候,当然希望这里面可以是灵活变化的,所以这就需要用到slot了
首先要做的事情就是创建这样一个组件,这里我采用的是<template>的形式,如下面这样
<template id="per"> <div> <p>姓名:</p> <p>年龄:</p> <p>职业:</p> </div> </template>
可以看到我这里给template添加了id,这个是为了后面的操作
下面使用Vue的构造器,创建Vue实例,然后添加局部的组件,如下面这样
var person = { template : "#per" //利用id }; new Vue({ el: "#app", data: { componentData: { name : "vam", age : 18, job : "student" } }, components : { "person" : person } });
接下来就是要在<person> 组件使用的时候添加点东西,就是具体内容,下面这样:
<div id="app"> <person> <span slot="name">{{componentData.name}}</span> <span slot="age">{{componentData.age}}</span> <span slot="job">{{componentData.job}}</span> </person> </div>
当然这样还是不够的,总得在模板中有点什么吧,如下,这里就该用到slot了
<template id="per"> <div> <p>姓名:<slot name="name"></slot></p> <p>年龄:<slot name="age"></slot></p> <p>职业:<slot name="job"></slot></p> </div> </template>
之后就可以看到想要的结果了
以上就是Vue.js中组件中的slot实例的讲解,大家如果有疑问请留言讨论,共同进步,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
vue.js学习之UI组件开发教程
本文主要给大家介绍了关于vue.js之UI组件开发的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 1. 新建组件: <script src="/public/javascripts/vue.js"></script> <style> #app1{background-color: red} #app2{background-color: blue} </style> <body> <div id=&quo
-
vue.js组件之间传递数据的方法
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件. // 注册一个子组件 Vue.component('child', { data: function(){ text: '我是fathe
-
Vue.js划分组件的方法
常见的一些页面,大家坐在一起敲代码就可以了,做完这个页面再做别的页面,但是作为一个功能复杂的系统,尤其是使用一些适合模块化开发的框架,这样会显得效率很低,那么我们就单纯的看在Vue里面如何划分组件的. 总结下来有两种可以划分,两种划分的方法一种是页面上的功能块,select,pagenation,和一些需要大量代码去实现的一些部分,我们可以把它提取出来放到一起或者分类.还有一种根据页面区域来划分,header,footer,sidebar,有了组件之后Vue的组件是怎么实现的? Vue的组件是怎
-
Vue.js上下滚动加载组件的实例代码
由于工作的需要并鉴于网上的vue.js滚动加载方案不合适,自己写了一个简单实用的.就短短的150行代码. 组件代码 // scrollLoader.vue // 滚动加载组件 <style scoped> .container-main {margin: 0 auto; overflow: auto; overflow-x: hidden; padding: 0;} .loading{ width: 100%; height: 40px; position: relative; overflo
-
vue.js移动端tab组件的封装实践实例
这是vue.js系列文章第二遍,第一篇讲述的是如何搭建vue.js的开发环境,计划按进度做成一款完整的app,当然前提是时间允许的话.本文用到了stylus语法,至于为什么使用stylus而不去用sass,主要是因为stylus来自于Node.js社区.总之stylus是一款高效的CSS预处理器,具体使用不在本文讨论范围.好了,废话不说了,下面讲述怎么封装tababr的切换. 底部tab进行页面切换,会用到vue里面的路由,也就是vue-router 我们在安装vue-cli时选中默认安装vu
-
vue组件中的样式属性scoped实例详解
Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</di
-
vue.js父子组件通信动态绑定的实例
如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id='app'> <!--这里的作用是将父组件渲染到页面上--> <father></father> </d
-
vue中v-model动态生成的实例详解
vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <
-
Vue中util的工具函数实例详解
Vue中util的工具函数,下面通过实例代码给大家介绍的非常详细,具体代码如下所示: // 防抖函数 function debounce (fn, wait) { let t return () => { let context = this let args = arguments if (t) clearTimeout(t) t = setTimeout(() => { fn.apply(context, args) }, wait) } } function flatten (arr)
-
vue组件间的参数传递实例详解
场景分析 在前端开发中,我们常常会运用到"组件库".在main入口中引入组件库,就可以很轻松的在页面中引入,并做一些基本的配置,如样式,颜色等.只需要在引入的组件中写入特定的属性,就能够定义. 举例说明 例如:element-ui组件库中使用switch开关,有个属性active-color是设置"打开时"的背景色.change事件是触发状态的事件. <el-switch v-model="value" :active-color=&quo
-
React18 中的 Suspense API使用实例详解
目录 什么是新的 ReactJS Suspense API,什么时候应该使用它? 什么是Suspense API? 什么是 transition API? 最后 什么是新的 ReactJS Suspense API,什么时候应该使用它? 何时使用:当组件开始变大并且您在同一页面上有许多组件时,您可能希望开始优化下载到客户端浏览器的方式和时间. 为此,React 为您提供了lazyAPI,它允许您将组件标记为lazy,这意味着被lazy包裹的组件,将会在第一次真正使用时被加载,而不是页面初始化的时
-
C++ 中const修饰虚函数实例详解
C++ 中const修饰虚函数实例详解 [1]程序1 #include <iostream> using namespace std; class Base { public: virtual void print() const = 0; }; class Test : public Base { public: void print(); }; void Test::print() { cout << "Test::print()" << end
-
IOS 中CALayer绘制图片的实例详解
IOS 中CALayer绘制图片的实例详解 CALayer渲染内容图层.与UIImageView相比,不具有事件响应功能,且UIImageView是管理内容. 注意事项:如何使用delegate对象执行代理方法进行绘制,切记需要将delegate设置为nil,否则会导致异常crash. CALayer绘制图片与线条效果图: 代码示例: CGPoint position = CGPointMake(160.0, 200.0); CGRect bounds = CGRectMake(0.0, 0.0
-
Linux 中常用的Rpm命令实例详解
rpm命令是RPM软件包的管理工具.rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他发行版的采用.RPM套件管理方式的出现,让Linux易于安装,升级,间接提升了Linux的适用度. 语法 rpm(选项)(参数) 选项 -a:查询所有套件: -b<完成阶段><套件档>+或-t <完成阶段><套件档>+:设置包装套件的完成阶段,并指定套件档的文件名称: -c:只列出
-
Linux 中fork的执行的实例详解
Linux 中fork的执行的实例详解 先看看一段fork的程序 int main() { pid_t pid; 语句 a; pid = fork(); 语句 b; } 1.当程序运行到 pid = fork()时,这个进程马上分裂(fork的中文意思)成两个进程,我们称为父进程和子进程,子进程是父进程的副本,副本的意思是子进程把父进程的数据空间,堆和栈都复制一遍给自己用,这要求在内存给子进程分配和父进程同样大的存储空间,这样,父,子进程拥有相同的数据,但不会共享存储空间,他们只是共享正文段.
随机推荐
- Windows Server 2012 R2或2016无法安装.NET Framework 3.5.1的解决方法
- python中通过预先编译正则表达式提高效率
- JS选中checkbox后获取table内一行TD所有数据的方法
- C语言设计图书登记系统与停车场管理系统的实例分享
- 在MySQL中实现二分查找的详细教程
- MySQL 重装MySQL后, mysql服务无法启动
- spring mvc整合freemarker基于注解方式
- CentOS 开机启动自定义脚本详解及实现
- Python实现的数据结构与算法之链表详解
- JQuery 常用方法基础教程
- 巧用canvas
- jQuery插件实现文字无缝向上滚动效果代码
- javascript之典型高阶函数应用介绍
- nginx强制使用https访问的方法(http跳转到https)
- Android中的webview支持页面中的文件上传实例代码
- jQuery EasyUI 折叠面板accordion的使用实例(分享)
- Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
- python制作抖音代码舞
- Android drawable微技巧,你不知道的drawable细节
- 微信小程序http连接访问解决方案的示例