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 相关文章推荐
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
简单的js计算器实现
Oct 26 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
vue模块移动组件的实现示例
May 20 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中上传大体积文件时需要的设置
2006/10/09 PHP
php中cookie的作用域
2008/03/27 PHP
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
php 图片上传类代码
2009/07/17 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
vue实现放大镜效果
2020/09/17 Javascript
python多线程扫描端口示例
2014/01/16 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
python删除不需要的python文件方法
2018/04/24 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
综合内勤岗位职责
2014/04/14 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
二年级学生期末评语
2014/12/26 职场文书
如何写观后感
2015/06/19 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
win7配置本地ftp服务器的图文教程
2022/08/05 Servers