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. SPOJ COT2 Count on a tree II （树上莫队）

    题目链接:http://www.spoj.com/problems/COT2/ 参考博客:http://www.cnblogs.com/xcw0754/p/4763804.html上面这个人推导部分写 ...

  2. USACO 保护花朵 Protecting the Flowers, 2007 Jan

    Description 约翰留下了 N 只奶牛呆在家里,自顾自地去干活了,这是非常失策的.他还在的时候,奶牛像 往常一样悠闲地在牧场里吃草.可是当他回来的时候,他看到了一幕惨剧:他的奶牛跑进了他的花园 ...

  3. art-template模板渲染及其过滤器

    原生语法 使用原生语法,需要导入template-native.js文件.在HTML中定义模板,注意模板的位置,不要放到被渲染区域,防止模板丢失. <script id="tpl&qu ...

  4. JAVA-mysql读写分离插件介绍

    kingshard是一个由Go开发高性能MySQL Proxy项目,kingshard在满足基本的读写分离的功能上,致力于简化MySQL分库分表操作:能够让DBA通过kingshard轻松平滑地实现M ...

  5. js判断PC端与移动端跳转

    在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 documen ...

  6. 区间dp+四边形不等式优化

    区间dp+四边形优化 luogu:p2858 题意 给出一列数 \(v_i\),每天只能取两端的数,第 j 天取数价值为\(v_i \times j\),最大价值?? 转移方程 dp[i][j] :n ...

  7. FreeCodeCamp初级算法部分学习

    Reverse a String 翻转字符串 先把字符串转化成数组,再借助数组的reverse方法翻转数组顺序,最后把数组转化成字符串. 你的结果必须得是一个字符串 当你完成不了挑战的时候,记得开大招 ...

  8. HDU 1205 吃糖果（水题）

    链接:传送门 思路:思维僵硬了,僵硬...... 简单的插隔板思想......选出来数量最多的糖果种类X,假设X数量为MAX,然后以X作为"隔板",形成X _ X _ X _ X ...

  9. BZOJ 1415 [NOI2005]聪聪与可可 (概率DP+dfs)

    题目大意:给你一个无向联通图,节点数n<=1000.聪聪有一个机器人从C点出发向在M点的可可移动,去追赶并吃掉可可,在单位时间内,机器人会先朝离可可最近的节点移动1步,如果移动一步机器人并不能吃 ...

  10. 我的Linux系统开始学习的过程

    Linux系统,不知大家是否了解.接触计算机不多或对计算机不感冒的人可能对其比较陌生,曾经的我也是.上大学前的我的确对Linux一无所知,那时候接触面窄,都没有听说过此名字,上了大学后,身边的人有学习 ...