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 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
vue在响应头response中获取自定义headers操作
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
php表单敏感字符过滤类
2014/12/08 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
php类常量用法实例分析
2015/07/09 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
PHP7 windows支持
2021/03/09 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
django用户登录验证的完整示例代码
2019/07/21 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
介绍一下内联、左联、右联
2013/12/31 面试题
大学生预备党员自我评价分享
2013/11/16 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
本科应届生自荐信
2014/06/29 职场文书
学校个人对照检查材料
2014/08/26 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
大学生自我评价范文
2015/03/03 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python