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. UESTC--1271--Search gold(贪心)

    Search gold Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %lld & %llu Submit Sta ...

  2. db file sequential read等待事件 --转载

    db file sequential read db file sequential read等待事件有3个参数:file#,first block#,和block数量.在10g中,这等待事件受到用户 ...

  3. 使用Chrome插件Postman进行简单的Get/Post测试

    转自:https://blog.csdn.net/dearmorning/article/details/56854236 Postman插件: 一种网页调试与发送网页http请求的chrome插件, ...

  4. ios中去除tableView的分割线

     self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

  5. category的概念

    category 的意思应该是为基类添加一个子类的声明方法 可以在创建基类对象的时候访问到子类的对象方法 category 可以说是 类的扩展 也可以说是 将类分成了几个模块 需要注意的是 在cate ...

  6. ubuntu DNS 出错，用以下命令可以解决

    具体的错误为:DNS_PROBE_FINISHED_BAD_CONFIG 命令为: sudo rm /etc/resolv.conf sudo ln -s ../run/resolvconf/reso ...

  7. sql server 随机生成布尔值

    ) AS BIT) 或者 )

  8. PHP 导出excel 数据量大时

    public function ceshiexcel1(){ set_time_limit(0); $filename = '病毒日志'; header('Content-Type: applicat ...

  9. SQL CASE WHEN语句性能优化

    背景:性能应该是功能的一个重要参考,特别是在大数据的背景之下!写SQL语句时如果仅考虑业务逻辑,而不去考虑语句效率问题,有可能导致严重的效率问题,导致功能不可用或者资源消耗过大.其中的一种情况是,处理 ...

  10. Excel基础视频教程在线观看

    也许你已经在Excel中完成过上百张财务报表,也许你已利用Excel函数实现过上千次的复杂运算,也许你认为Excel也不过如此,甚至了无新意.但我们平日里无数次重复的得心应手的使用方法只不过是Exce ...