AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

vue Render scopedSlots

2017-11-15 3466
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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

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

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

[html]  view plain  copy
 
  1. <body>  
  2.     <div class="" id="app">  
  3.     <myslot>  
  4.         <div>this is slot</div>  
  5.     </myslot>  
  6.   
  7.   
  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.$slots.default])  
  14.             }  
  15.     });  
  16.     var app=new Vue({  
  17.         el:'#app'  
  18.     })  
  19.     </script>  
  20.     </body>   

多个slot的使用

 

[html]  view plain  copy
 
  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.   
  8.   
  9.     </div>  
  10.     <script>  
  11.     Vue.component('myslot',{  
  12.         render:function(createElement){  
  13.              var he=createElement('div',{domProps:{innerHTML:'this child div'}});  
  14.             return createElement('div',[he,this.$slots.name2,this.$slots.name1])  
  15.             }  
  16.     });  
  17.     var app=new Vue({  
  18.         el:'#app'  
  19.     })  
  20.     </script>  
  21.     </body>  


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

 

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

 

[html]  view plain  copy
 
  1. <body>  
  2.     <div class="" id="app">  
  3.     <myslot>  
  4.         <template scope="props">  
  5.             <div>{{props.text}}</div>  
  6.         </template>  
  7.   
  8.     </myslot>  
  9.   
  10.   
  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',[he,this.$scopedSlots.default({  
  17.                 text:'hello scope'  
  18.             })])  
  19.             }  
  20.     });  
  21.     var app=new Vue({  
  22.         el:'#app'  
  23.     })  
  24.     </script>  
  25.     </body>  



 

多个$scopedSlot的使用

 

[html]  view plain  copy
 
    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.   
    11.     </myslot>  
    12.   
    13.   
    14.     </div>  
    15.     <script>  
    16.     Vue.component('myslot',{  
    17.         render:function(createElement){  
    18.              var he=createElement('div',{domProps:{innerHTML:'this child div'}});  
    19.             return createElement('div',  
    20.                 [he,  
    21.                 this.$scopedSlots.name1({  
    22.                 text:'hello scope'  
    23.             }),  
    24.                 this.$scopedSlots.name2({  
    25.                 text:'$scopedSlots using'  
    26.             })])  
    27.             }  
    28.     });  
    29.     var app=new Vue({  
    30.         el:'#app'  
    31.     })  
    32.     </script>  
    33.     </body>  

本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/7111757.html，如需转载请自行联系原作者
文章标签：
JavaScript
关键词：
vue render VUE.js
render VUE.js
VUE.js render
范大脚脚
目录
相关文章
34789737
|
10月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
793 2
哇塞女孩
|
9月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
663 137
谢妹纸
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
1347 0
我们是幸福一家人
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
594 82
34789737
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
797 17
rvblio6ca4cug
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
836 1
34789737
|
12月前
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
582 0
34789737
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用，可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置（如自定义表情列表、主题定制、动画效果和懒加载）以及完整集成示例。开发者可根据需求扩展功能，例如 GIF 搜索或自定义表情上传，提升用户体验。资源链接提供进一步学习材料。
34789737
874 1
34789737
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中，实现文件批量下载是常见需求。例如文档管理系统或图片库应用中，用户可能需要一次性下载多个文件。本文介绍了三种技术方案：1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载；2) 借助后端接口完成文件压缩与传输；3) 使用`StreamSaver`解决大文件下载问题。同时，通过在线教育平台的实例详细说明了前后端的具体实现步骤，帮助开发者根据项目需求选择合适方案。
34789737
1104 0
34789737
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入，动态渲染进度段，支持动画效果和内容展示。当进度超出总长时，超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤（包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示），并提供了使用示例。通过此组件，开发者可根据项目需求灵活展示进度情况，优化用户体验。资源地址：[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
34789737
609 0