精华内容
下载资源
问答
  • 主要介绍了Vue中的slots/scoped slots,本文实例代码相结合的形式给大家介绍了slots的工作原理,需要的朋友可以参考下
  • 什么是scoped slots A scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements. 上面是官方的定义。 作用域插槽...
  • 所以要用customRender重新定义,但 是 table也需要根据状态来展示不同的状态用到scopedSlots时就不起作用了; 就向这样 ![图片说明](https://img-ask.csdn.net/upload/202011/03/1604385597_702750.png) --------...
  • 一、$slots 只读属性,用来访问被插槽分发的内容,每个具名插槽都有其对应的属性,default属性包含了所有没有包含在具名插槽中的节点。...二、$scopedSlots 只读属性,用来访问作用域插槽。 ...

    目录

    一、概述

    二、详解

    三、拓展


    一、概述

    Vue组件实例有两个专门用来处理插槽的API,分别是$slots和$scopedSlots。

    二、详解

    $slots

    $slots是一个具有只读属性的对象,用来访问被插槽分发的内容。

    如果当前Vue组件实例设置的普通插槽被其父组件分发了内容,若被分发内容的插槽是具名插槽,则该插槽的名称是$slots对象的属性,若被分发内容的插槽是匿名插槽,则用$slots.default属性访

    展开全文
  • 下面的正文,便是讲述我在实际项目中遇到的问题,使用scopedSlots是如何解决它。 点击链接你可以看到完整的代码 正文 在app.js里,构建my-list组件,渲染shapes和colors两个测试数组,接受传递的title属性,其代码...

    前言

    作用域插槽可以使vue组件更具备通用性(versatile)和可复用性(reusable)。可能唯一不足的地方是其概念有些难懂,通常我遇到不好理解的代码,便会试图将它用到实际项目中,解决之前遇到的问题。下面的正文,便是讲述我在实际项目中遇到的问题,使用scopedSlots是如何解决它。

    点击链接你可以看到完整的代码

    正文

    app.js里,构建my-list组件,渲染shapescolors两个测试数组,接受传递的title属性,其代码如下:

    Vue.component('my-list', {
      template: '#my-list',
      props: [ 'title' ]
      data() {
        return {
          shapes: [ 
           	  { name: 'Square', sides: 4 }, 
              { name: 'Hexagon', sides: 6 }, 
              { name: 'Triangle', sides: 3 }
          ],
          colors: [
    	      { name: 'Yellow', hex: '#F4D03F', },
    	      { name: 'Green', hex: '#229954' },
    	      { name: 'Purple', hex: '#9B59B6' }
    	    ]
        };
      }
    });
    
    new Vue({
      el: '#app'
    });
    

    index.html里,实现shapescolors的数据渲染,以及编写my-list组件里的template

    <div id="app">
      <my-list :title="Shapes">
        <div class="list-item" v-for="item in shapes">
          <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
        </div>
      </my-list>
      <my-list :title="Colors">
        <div class="list-item" v-for="color in colors">
          <div>
            <div class="swatch" :style="{ background: color.hex }"></div>
            {{ color.name }}
          </div>
        </div>
      </my-list>
    </div>
    
    <script type="text/x-template" id="my-list">
      <div class="my-list">
        <div class="title">{{ title }}</div>
        <div class="list">
          <slot></slot>
        </div>
      </div>
    </script>
    

    添加一些css,可看到渲染效果如下图所示
    在这里插入图片描述
    虽然实现了两组列表,但是在组件实现内部,有重复性代码<div class="list-item" v-for="item in ...">,如果我们能将其移入到my-list组件内部,而不是放到父组件上实现,那该多好!scopedSlots成功解决了该问题。

    scopedSlots

    它之所以被叫作"scoped" slot,那是因为虽然它的template放在父组件内渲染,但是父组件可以读取到子组件内指定的data数据
    通过scopedSlots,我们改写app.js里的代码

    Vue.component('my-list', {
      template: '#my-list',
      props: [ 'title', 'items' ]
    });
    

    index.html里,改动后的完整代码如下所示

    <div id="app">
      <my-list title="Shapes" :items="shapes">
        <template scope="shape"> // 通过scoped,可访问到子组件内部单个数据shape
          <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
        </template>
      </my-list>
      <my-list title="Colors" :items="colors">
        <template scope="color">
          <div>
            <div class="swatch" :style="{ background: color.hex }"></div>
            {{ color.name }}
          </div>
        </template>
      </my-list>   
    </div>
    
    <script type="text/x-template" id="my-list">
      <div class="my-list">
        <div class="title">{{ title }}</div>
        <div class="list">
          <div v-for="item in items">
            <slot v-bind="item"></slot>
          </div>
        </div>
      </div>
    </script>
    

    让我们先看shapes list,该模板必须包含scope属性,我们对该属性赋上一个别名shape,该别名让我们能访问作用域属性。在模板内部,我们可以像之前代码那样显示shape list。

    结束语

    虽然在使用scopedSlots后,仍然和以前一样有那么多的HTML标记(markup),但是它已经将公共的功能委托到组件内部,这有利于系统代码的健壮性。

    有兴趣的同学,可以看看原文链接

    展开全文
  • vue Render scopedSlots

    千次阅读 2019-03-21 16:39:15
    render 中 slot 的一般默认使用方式如下: this.$slots.default 对用 template的<slot>的使用没有name 。 想使用多个slot 的话。需要对slot命名唯一。 在render函数中动态使用多个slot,并且给slot传值 一、...

    render 中 slot 的一般默认使用方式如下: this.$slots.default 对用 template的<slot>的使用没有name 。 想使用多个slot 的话。需要对slot命名唯一。

    在render函数中动态使用多个slot,并且给slot传值

    一、我的业务逻辑:

          使用了三个组件,

           组件A调用组件B,组件B调用组件C,组件C是自己封装的render渲染组件。

           组件A希望将自己自定义的插槽插到C组件,C组件渲染出自定义的内容,并且将C组件的值传递给B组件和A组件,B组件是对C组件进行更大一层的封装

         A组件调用B组件

    <index-grid>
              <div
                slot="name"
                slot-scope="field"
                class="check-link"
                @click="rowLinkClick"
              >
                <span>{{ field.field.rowData.name }}</span>
              </div>
    </index-grid>

    A组件引用B组件,slot-scope接收从B组件中传出来solt的值,slot=“name”,是为插槽具名;

    B组件中调用C组件的render函数

    <sub-grid ref="indexGridSub">
          <span
            v-for="(item, index) in fields"
            :key="index"
            slot="name"
            slot-scope="field"
          >
            <slot name="name" :field="field"></slot>
          </span>
    
        </sub-grid>

    B组件span中 slot是动态的值,和A组件中的slot同一个值,才能接受来自A组件自定义的插槽,

    field是来自于C组件中传递的值

    C组件是render函数

    h(
              "td",
              {
                style: { width: field.width + "px" },
                class: { borderRight },
                // 作用域插槽格式
                // { name: props => VNode | Array<VNode> }
                scopedSlots: this.$scopedSlots.name,
                // 如果组件是其他组件的子组件,需为插槽指定名称
                slot: 'name'
              },
              this.$scopedSlots.name({
                field: field,
                rowData: rowData,
              })
            );

    C组件往上传递的值就是{field:'', rowData: ''}的对象

    欢迎关注我的个人技术公众号!javascript艺术

     

    展开全文
  • render 函数基础 | Slot与scopedSlots使用

    千次阅读 2020-07-31 20:32:02
    render 函数基础 | Slot与scopedSlots使用 什么是render 函数 createElement 参数 1.事件的使用 2.插槽的使用 slot scopedSlots 什么是render 函数 render 函数需要你将模板定义为 JavaScript 对象,即用js来构建DOM...

    什么是render 函数

    render 函数需要你将模板定义为 JavaScript 对象,即用js来构建DOM

    原理:

    1. 通过js对象模型所表达的html结构转换成AST(抽象语法树)用于构建虚拟节点VNode
    2. render函数再在这个虚拟节点上渲染数据,完成数据渲染后就添加到html文档中渲染到页面

    优点

    1. 使模板更接近编译器,并允许你使用完整的 JavaScript 功能,而不是指令提供的子集

    注意项:

    1. 优先级:render> template > el
    2. 所以Vue 选项中的 render 函数若存在,则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数

    createElement 参数

    Vue中的Render函数中有一个参数,这个参数是一个函数通常我们叫做createElement。Render函数将createElement的返回值放到了HTML中;createElement这个函数中有3个参数:

    1. 第一个参数可以是HTML标签名,组件或者函数都可以(必须的)
    2. 第二个参数为数据对象
    3. 第三个参数为子节点(字符串或数组)
      在这里插入图片描述

    参考官网:(https://cn.vuejs.org/v2/guide/render-function.html#createElement-%E5%8F%82%E6%95%B0)

    下面写几个例子:

    1.事件的使用

    //template use
    <evn list="hahahah"></evn>
    //contentTheTemplate
    Vue.component('evn', {
                props: ['list'],
                render(h){
                //因为官方有写将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,
                //实际上也是 JSX 所要求的
                    let _this = this;
                    return h('button', {
                        on:{
                        	//此处如果这样写,会导致页面渲染完直接触发
                        	//并不受click控制
                            // click:_this.alert(_this.list)
                            click: () => {_this.alert(_this.list)}
                        }
                    }, [h('p', '大哥快点我呀')])
                }
            })
    //a method is call    
         Vue.mixin({
             methods: {
                 alert(res){
                     alert(res)
                 },
             },
         })
    

    2.插槽的使用

    slot

    	<c-list cti="[{'tit': '我在这'},{'tit': '不我在这儿'}]">
          <p>12312</p>
        </c-list>
        
    	Vue.component('c-list',{
                props: ['cti'],
                render(h) {
                //使用map方法实现v-for效果
                //this.$slot 类型:{[name: string]: ?Array<VNode>}
                //this.$slots.default 为默认插槽
                //也可以定义具名插槽 this.$slots.名称 | 使用 v-slot:名称 插入
                    return h('div',[this.cti.map(res=> h('div', res.tit)), this.$slots.default]
                    )
                }
            })
            //上式等于
            <div v-for="item in [{'tit': '我在这'},{'tit': '不我在这儿'}]">
            	<div>{{ item.tit }}</div>
            	<slot></slot>
    		</div>
    

    结果:
    在这里插入图片描述

    scopedSlots

    scopedSlots主要用于子组件的作用域插槽

    //接受子组件数据
    	<ming>
          <div slot-scope="props">{{ props.text }}</div>
          <template slot="name1" scope="props">
            <span>{{props.text}}</span>
          </template>
        </ming>
    	
    	Vue.component('ming', {
                render(h){
                //this.$scopedSlots 类型{[name: string]: props => Array<VNode> | undefined}
                //组件向插槽内传递参数 {'text':'caomingrui'}
                    return h('div', [this.$scopedSlots.default({
                        text: 'caomingrui'
                    }),
                    this.$scopedSlots.name1({
                            text:'hello scope'
                        })
    				])
                }
            })
    

    结果:
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200731194545523.png

    	<rui></rui>
    	//定义子组件
    	Vue.component ("c-node", {
                render(h){
                    return h('div', [
                    	//定义向默认操作传值
                        // this.$scopedSlots.default({
                        //     text: '000000000000'
                        // }),
                        this.$scopedSlots.ddg({
                            text: 'caomingrui123'
                        })
                    ])
                }
            })
            Vue.component('rui', {
                render(h){
                    return h('div',[h('c-node', {
                    //接受对应值
                        scopedSlots: {
                            default: props => h('span', props.text)
                        },
                    }),
                    h('c-node', {
                        scopedSlots: {
                            ddg: props => h('span', props.text)
                        },
                    })])
                }
            })
            
    

    结果:
    在这里插入图片描述

    展开全文
  • 最近研究了vue的官方文档,到组件自定义渲染函数时,对第二个属性对象参数中的scopedSlots不太明白作用是什么,官网的案例也是一笔带过,于是连查带试算是明白了他的作用,这里记录一下,希望能帮到遇到相同问题的童鞋. ...
  • Vue使用Ant design中a-tree的scopedSlots实现树标题的前后都有icon图标 <a-tree style="width:100%" :tree-data="treeData" show-icon :default-selected-keys="[treeData[0].key]"> <!-- 每项 最前面的 ...
  • ant design vue中组件的scopedSlots用法

    千次阅读 2021-05-17 10:14:09
    2:如果从后台获取的数据中没有scopedSlots属性,则需要给添加上,这里我的treeList里的children对应standardCategoryList,使用递归为所有项添加上。{ title: ‘zdName’ },zdName是插槽名,可随意取,这里推荐...
  • this.$slots.con1, this.$scopedSlots.con2({ name1: this.arr }) ])]) }, mounted() { console.log(this) // 当前vue实例 // 使用实例中可以获取到的slot项 将其渲染在页面中 // console.log( this.$slots ) }, })...
  • Vue里你需要知道的 scopedSlots jsx

    千次阅读 2020-08-03 10:00:35
    Vue.js 你需要知道的 scopedSlots scopedSlots和 slot-scope 的区别? 作用相同:都是作用域插槽 场景不同:slot-scope是模板语法,scopedSlots则是编程式语法 使用不同:在<template>中使用slot-scope,...
  • 官方定义 vm.$slots 类型:{[name: string]: ?Array<VNode>} ...default属性包括了所有没有被包含在具名插槽中的节点或v-slot:default的内容 在使用渲染函数书写一个组件时,...vm.$scopedSlots 类型:{[...
  • 深入理解Vue中的slots/scoped slots

    千次阅读 2018-04-01 08:03:16
    一直对Vue中的slot插槽比较感兴趣...下面结合一个例子,简单说明slots的工作原理 dx-li子组件的template如下: <li class="dx-li"> <slot> 你好 掘金! </slot> </li> 复制代码 dx-ul...
  • scopedSlots属性主要用于子组件的作用域插槽 createElement函数的第2个参数中,scopedSlots属性用于指定子组件的作用域插槽。当createElement函数的第一参数是一个自定义组件,并且这个自定义组件中使用了插槽。...
  • (2)当数据需要经过计算或者转换再进行展示时,需要用到scopedSlots 这个属性, 例如:申请日期需要转换成 年-月-日 的格式 { title: '申请日期', dataIndex: 'apply_day', key: 'apply_day', ellipsis: true, ...
  • 使用ant-design-vuescopedSlots: { customRender: 'columnName' } 通过区分不同字段,用于跳转不同页面。 columns: [ { title:'name2', align:"center", sorter: true, dataIndex: '... scopedSlots: {.
  • 探索 vm.$slots 和 vm.$scopedSlots 以下例子是在Vue@2.6.2中运行的。 vm.$slots内包含当前组件实例中所有插槽(包括默认插槽、具名插槽、作用域插槽)。 &amp;amp;amp;lt;!-- App.vue --&amp;amp;amp;gt...
  • antd-vue中的tree树形控件关于scopedSlots的用法介绍

    千次阅读 热门讨论 2020-10-14 14:08:56
    antd-vue中的tree树形控件关于scopedSlots的用法介绍 这是官网的API: 效果图: 很多时候,我们拿到的数据都是后端返回过来的数据,那如果要用到scopedSlots这个API,仅后端返回的数据是不够的,我们需要处理下,...
  • vue render data scopedSlots属性详解

    千次阅读 2019-03-05 19:11:46
    [createElement('child-component',{scopedSlots:{default:function(props){ return createElement('span',props.text) }}},[this.$scopedSlots.default({ text:'this is scope slot', title...
  • vue $scopedSlots作用域插槽

    千次阅读 2019-03-04 15:07:51
    <h1 slot-scope="props">{{props.text}} Vue.component('my-component',{ ... this.$scopedSlots.default({ text:'hello world' }) ]) } }) var vm = new Vue({ el:'#app', })
  • Vue如何在 JSX 中使用 scopedSlots ? scopedSlots 和 slot-scope 的区别 scopedSlots 和 slot-scope 的区别 作用相同:都是作用域插槽 场景不同:slot-scope 是模板语法,scopedSlots 则是编程式语法 使用...
  • render-page.vue <template> <div> <list :list="list" :style="{color: 'red'}"> <count-to slot-scope="count" :end-val="count.number" ></count-to>.../d...
  • 最近的开发中,有需求多个列表使用同一个table组件,在开发中正常编写,结果突然就报错了,报错信息如下: 当时就蒙了,完全不知道错在哪里,后面一步步排查原因,刚开始以为是逻辑...就是相同dom会被复用,这就是...
  • JSX $scopedSlots

    2021-01-12 14:18:21
  • 情景描述: 在使用 element ui 的el-table 组件时,表头进行v-if判断来动态显示,正常来说这样的操作时没得任何毛病的,但是如果在这基础上使用 &lt;template slot-scope="scope"...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,302
精华内容 1,320
关键字:

scopedslots