Vue.js中组件中的slot实例详解


Posted in Javascript onJuly 17, 2017

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实例的讲解,大家如果有疑问请留言讨论,共同进步,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
javascript实现动态标签云
Oct 16 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
vue cli 全面解析
Feb 28 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
Vue.js上下滚动加载组件的实例代码
Jul 17 #Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 #Javascript
详解利用jsx写vue组件的方法示例
Jul 17 #Javascript
Javascript实现找不同色块的游戏
Jul 17 #Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 #Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 #Javascript
JS中Safari浏览器中的Date
Jul 17 #Javascript
You might like
在字符串中把网址改成超级链接
2006/10/09 PHP
PHP 面向对象实现代码
2009/11/11 PHP
PHP常用数组函数介绍
2014/07/28 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
Python实现简单的代理服务器
2015/07/25 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
python 文件查找及内容匹配方法
2018/10/25 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
python实现随机加减法生成器
2020/02/24 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
初婚初育证明
2014/01/14 职场文书
中国央视网签名寄语
2014/01/18 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
鉴定评语大全
2014/05/05 职场文书
团日活动总结格式
2015/05/11 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
父亲节感言
2015/08/03 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js