vue Render中slots的使用的实例代码


Posted in Javascript onJuly 19, 2017

本文介绍了vue Render中slots的使用的实例代码,有需要了解vue Render中slots用法的朋友可参考。希望此文章对各位有所帮助。

render 中 slot 的一般默认使用方式如下:

this.$slots.default 对用 template的<slot>的使用没有name 。

想使用多个slot 的话。需要对slot命名唯一。使用this.$slots.name 在render中添加多个slot。

<body> 
  <div class="" id="app"> 
  <myslot> 
    <div>this is slot</div> 
  </myslot> 
 
 
  </div> 
  <script> 
  Vue.component('myslot',{ 
    render:function(createElement){ 
       var he=createElement('div',{domProps:{innerHTML:'this child div'}}); 
      return createElement('div',[he,this.$slots.default]) 
      } 
  }); 
  var app=new Vue({ 
    el:'#app' 
  }) 
  </script> 
  </body>

多个slot的使用

<body> 
  <div class="" id="app"> 
  <myslot> 
    <div slot="name1">this is slot</div> 
    <div slot="name2">The position is slot2 </div> 
  </myslot> 
 
 
  </div> 
  <script> 
  Vue.component('myslot',{ 
    render:function(createElement){ 
       var he=createElement('div',{domProps:{innerHTML:'this child div'}}); 
      return createElement('div',[he,this.$slots.name2,this.$slots.name1]) 
      } 
  }); 
  var app=new Vue({ 
    el:'#app' 
  }) 
  </script> 
  </body>

在vue2.1.0新添加了scope(虽然感觉有点怪,但是用习惯了,还蛮好用的)。同样给出一般使用和多个使用示例,

<body> 
  <div class="" id="app"> 
  <myslot> 
    <template scope="props"> 
      <div>{{props.text}}</div> 
    </template> 
 
  </myslot> 
 
 
  </div> 
  <script> 
  Vue.component('myslot',{ 
    render:function(createElement){ 
       var he=createElement('div',{domProps:{innerHTML:'this child div'}}); 
      return createElement('div',[he,this.$scopedSlots.default({ 
        text:'hello scope' 
      })]) 
      } 
  }); 
  var app=new Vue({ 
    el:'#app' 
  }) 
  </script> 
  </body>

多个$scopedSlot的使用

<body> 
  <div class="" id="app"> 
  <myslot> 
    <template slot="name2" scope="props"> 
      <div>{{props.text}}</div> 
    </template> 
    <template slot="name1" scope="props"> 
      <span>{{props.text}}</span> 
    </template> 
 
  </myslot> 
 
 
  </div> 
  <script> 
  Vue.component('myslot',{ 
    render:function(createElement){ 
       var he=createElement('div',{domProps:{innerHTML:'this child div'}}); 
      return createElement('div', 
        [he, 
        this.$scopedSlots.name1({ 
        text:'hello scope' 
      }), 
        this.$scopedSlots.name2({ 
        text:'$scopedSlots using' 
      })]) 
      } 
  }); 
  var app=new Vue({ 
    el:'#app' 
  }) 
  </script> 
  </body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
js类型检查实现代码
Oct 29 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 #Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 #Javascript
深入理解vue Render函数
Jul 19 #Javascript
Vue AST源码解析第一篇
Jul 19 #Javascript
Vue之Watcher源码解析(1)
Jul 19 #Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 #Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 #Javascript
You might like
在数据量大(超过10万)的情况下
2007/01/15 PHP
php 无法载入mysql扩展
2010/03/12 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python实现获取序列中最小的几个元素
2014/09/25 Python
python爬取m3u8连接的视频
2018/02/28 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
在python中做正态性检验示例
2019/12/09 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
python网络编程之五子棋游戏
2020/05/14 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
初任培训自我鉴定
2013/10/07 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
村党支部书记承诺书
2014/05/29 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
2014年司法局工作总结
2014/12/11 职场文书
建国大业观后感800字
2015/06/01 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python