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 相关文章推荐
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
小程序实现密码输入框
Nov 16 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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
PHP迭代器的内部执行过程详解
2013/11/12 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
jquery ajax请求实例深入解析
2012/11/26 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
Python实现获取某天是某个月中的第几周
2015/02/11 Python
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
Python中的整除和取模实例
2020/06/03 Python
python的flask框架难学吗
2020/07/31 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
致800米运动员广播稿
2014/02/16 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
运动员口号
2014/06/09 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript