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

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

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

  1. <body>
  2. <div class="" id="app">
  3. <myslot>
  4. <div>this is slot</div>
  5. </myslot>
  6. </div>
  7. <script>
  8. Vue.component('myslot',{
  9. render:function(createElement){
  10. var he=createElement('div',{domProps:{innerHTML:'this child div'}});
  11. return createElement('div',[he,this.$slots.default])
  12. }
  13. });
  14. var app=new Vue({
  15. el:'#app'
  16. })
  17. </script>
  18. </body>

多个slot的使用

  1. <body>
  2. <div class="" id="app">
  3. <myslot>
  4. <div slot="name1">this is slot</div>
  5. <div slot="name2">The position is slot2 </div>
  6. </myslot>
  7. </div>
  8. <script>
  9. Vue.component('myslot',{
  10. render:function(createElement){
  11. var he=createElement('div',{domProps:{innerHTML:'this child div'}});
  12. return createElement('div',[he,this.$slots.name2,this.$slots.name1])
  13. }
  14. });
  15. var app=new Vue({
  16. el:'#app'
  17. })
  18. </script>
  19. </body>

在vue2.1.0新添加了scope(虽然感觉有点怪，但是用习惯了，还蛮好用的)

同样给出一般使用和多个使用示例，

  1. <body>
  2. <div class="" id="app">
  3. <myslot>
  4. <template scope="props">
  5. <div>{{props.text}}</div>
  6. </template>
  7. </myslot>
  8. </div>
  9. <script>
  10. Vue.component('myslot',{
  11. render:function(createElement){
  12. var he=createElement('div',{domProps:{innerHTML:'this child div'}});
  13. return createElement('div',[he,this.$scopedSlots.default({
  14. text:'hello scope'
  15. })])
  16. }
  17. });
  18. var app=new Vue({
  19. el:'#app'
  20. })
  21. </script>
  22. </body>

多个$scopedSlot的使用

    1. <body>
    2. <div class="" id="app">
    3. <myslot>
    4. <template slot="name2" scope="props">
    5. <div>{{props.text}}</div>
    6. </template>
    7. <template slot="name1" scope="props">
    8. <span>{{props.text}}</span>
    9. </template>
    10. </myslot>
    11. </div>
    12. <script>
    13. Vue.component('myslot',{
    14. render:function(createElement){
    15. var he=createElement('div',{domProps:{innerHTML:'this child div'}});
    16. return createElement('div',
    17. [he,
    18. this.$scopedSlots.name1({
    19. text:'hello scope'
    20. }),
    21. this.$scopedSlots.name2({
    22. text:'$scopedSlots using'
    23. })])
    24. }
    25. });
    26. var app=new Vue({
    27. el:'#app'
    28. })
    29. </script>
    30. </body>

vue Render scopedSlots的更多相关文章

  1. vue render function

    vue render function https://vuejs.org/v2/guide/render-function.html { // Same API as `v-bind:class`, ...

  2. vue render 渲染函数

    vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...

  3. vue render里面的nativeOn

    vue render里面的nativeOn的解释官方的解释是:// 仅对于组件,用于监听原生事件,而不是组件内部使用 `vm.$emit` 触发的事件. 官方的解释比较抽象 个人理解: 父组件要在子组 ...

  4. vue render function & dataset

    vue render function & dataset https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In ...

  5. vue render & array of components & vue for & vue-jsx

    vue render & array of components & vue for & vue-jsx https://www.cnblogs.com/xgqfrms/p/1 ...

  6. vue render html string

    vue render html string shit element ui render string array relativeShowConvert(data) { // log(`data` ...

  7. vue render函数

    基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...

  8. vue render & JSX

    vue在绝大多数使用template是没问题的,但在某些场合下,使用render更适合. 一.render函数 1.createElement 参数 createElement 可接受三个参数 1){ ...

  9. vue render {} 对象 说明文档

    Vue学习笔记进阶篇——Render函数 http://www.mamicode.com/info-detail-1906336.html 深入data object参数 有一件事要注意:正如在模板语 ...

随机推荐

  1. 串口之CreateFile 函数具体解释

    HANDLE CreateFile( LPCTSTR lpFileName, //指向文件名称的指针 DWORD dwDesiredAccess, //訪问模式(写/读) DWORD dwShareM ...

  2. Ubuntu下的用户和权限（三）

    七.增删群组相关的命令 相同的我们要先介绍两个重要的设定档:/etc/group和/etc/gshadow,前面那个事实上和/etc/passwd一样.而后者就是群组的password表了.先看看长啥 ...

  3. Android开发之大位图压缩水印处理

    我们在发微博或者csdn博文的时候都能够给图片加上一个水印.一个独立的标识,那是怎么实现的呢?先封装一个BitmapTools封装类.该类要解决的问题是一将突破存储至sdcard中,二给图片加上水印. ...

  4. asp.net website 单独编译某个页面，连带编译app_code

    选中某一个页面,然后右键build page

  5. spark 随机森林算法案例实战

    随机森林算法 由多个决策树构成的森林,算法分类结果由这些决策树投票得到,决策树在生成的过程当中分别在行方向和列方向上添加随机过程,行方向上构建决策树时采用放回抽样(bootstraping)得到训练数 ...

  6. POJ 1384 Piggy-Bank DP

    一个完全背包 很裸,对于我这种DP渣渣都能1A.. // by SiriusRen #include <cstdio> #include <cstring> #include ...

  7. soapUI检查webServices接口的方法以及对自动触发线程的查询

    这几天需要熟悉接口传输过来的数据,因此会用到soapUI,但是没结果这个工具,然后百度了下,结合了下,下面是我对webservice在soapUI的展现: 1:其实说白了,就是我们不知道从接口里传输过 ...

  8. 硅谷最有名的帮派：如果你不知道PayPal黑帮

    paypal 你知道Tesla Motors,LinkedIn,SpaceX,Yelp,Yammer这几家公司的共同点吗?除了他们的市值都超过10亿美金之外,他们的创办人都是Paypal黑帮(Payp ...

  9. thinkphp 5 count()方法在控制器，模板中的使用方法

    thinkphp中关于count()方法的使用: 控制器中:echo count($arr)模板中:{$arr | count}模板中if判断语句中 <if condition="co ...

  10. easyUI datagrid的合并的js封装

    $.extend($.fn.datagrid.methods, { autoMergeCells : function (jq, fields) { return jq.each(function ( ...