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函数实现动态添加CSS样式表文件
Dec 15 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 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
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
javascript插入样式实现代码
2012/02/22 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
python中__call__内置函数用法实例
2015/06/04 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
实例详解Python装饰器与闭包
2019/07/29 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
基于keras中的回调函数用法说明
2020/06/17 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
保安的辞职报告怎么写
2014/01/20 职场文书
考察现实表现材料
2014/05/19 职场文书
物业消防安全责任书
2014/07/23 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
英文商务邀请函范文
2015/01/31 职场文书
高中班主任心得体会
2016/01/07 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js