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 相关文章推荐
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
编程语言Python的发展史
2014/09/26 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
Python随机函数random()使用方法小结
2018/04/29 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
python实现控制COM口的示例
2019/07/03 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
书香家庭事迹材料
2014/05/09 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
毕业论文致谢词
2015/05/14 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书