vue作用域插槽详解、slot、v-slot、slot-scope

目录
  • vue 插槽slot和具名插槽
  • 作用域插槽的核心作用是
  • 实例说明
    • 子组件
    • 父组件
  • 效果图

vue 插槽slot和具名插槽

作用都是在调用组件的时候传递一些DOM结构进去,

不同点是:具名插槽在传递DOM时需要声明,传递给哪个slot的名字 name

他们用法简单不在赘述。

重点说一下作用域插槽 slot-scope 的使用,以及vue2.6.X开始的新语法v-slot

作用域插槽的核心作用是

子组件给父组件传递数据,当然也包含上述插槽的能力

老版作用域插槽,

  • slot="test": 指定插槽的名字用
  • prop:可以随便定义,表示子组件传递过来的值得对象,可以用解构复制 { row, index }接受
<template slot="test" slot-scope="prop">
   {{ prop.wife.a }}
 </template>

新版是这样的,可以说语法更加清晰

v-slot指令直接跟上插槽名称,prop同上

 <template v-slot:test="prop">
          {{ prop.wife.b }}
        </template>

实例说明

子组件

这里我定义了多个具名插槽,并且用父组件传过来的数据尝试传递回去

<template>
  <div>
    <slot :user="user">
      <!-- 默认显示的值,当父组件使用次作用域插槽时,会被覆盖 -->
      {{ user.age }}
    </slot>
    <slot name="test" :wife='wife'>
      {{wife.a}}
    </slot>
    <slot name="hasProps" :baseData='baseData'>
      {{baseData.a_count}}
    </slot>
  </div>
</template>
<script>
export default {
  props: {
    baseData: {
      type: Object,
      default: () => {
        return {
          a_count: 0,
          b_count: 0,
          c_count: 0,
          d_count: 0,
          e_count: 0,
          order_amount: 0,
          order_num: 0,
          resource_num: 0
        }
      }
    }
  },
  data () {
    return {
      user: {
        name: '张三',
        age: 20
      },
      wife: {
        a: '小李',
        b: '小韩'
      }
    }
  }
}
</script>

父组件

部分代码:

其中的baseData,为服务端异步返回数据

  <div>
      <child>
        <template v-slot:default="prop">
          {{ prop.user.age }}
        </template>
        <template v-slot:test="prop">
          {{ prop.wife.b }}
        </template>
      </child>

      <child>
        <template slot-scope="prop">
          {{ prop.user.name }}
        </template>
        <template slot="test" slot-scope="prop">
          {{ prop.wife.a }}
        </template>
      </child>
      <!-- 尝试解构赋值 -->
      <child :baseData='baseData'>
        <template v-slot:hasProps="{baseData}">
          {{ baseData.a_count }}
        </template>
      </child>
    </div>

效果图

这两种是先注释掉所有child里面,所有代码的效果,前为接口返回前

这两张是不注释,前后图

可以看出,

在vue2.6以上两种模式都支持,不过官方说3.0就只支持v-slot指令了,

不使用作用域插槽就会显示默认的值,使用之后就按父组件的来

可以先动态更新数据。

使用过element-ui的同学,只要用过表格,我想现在应该明白作用域插槽有多大的用处了吧

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 深入理解vue中slot与slot-scope的具体使用

    写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生"算了吧,回头再学,反正已经可以写基础组件了",于是就关闭了vue说明文档. 实际上,插槽的概念很简单,下面通过分三部分来讲.这个部分也是按照vue说明文档的顺序来写的. 进入三部分之前,先让还没接触过插槽的同学对什么是插槽有一个简单的概念:插槽,也就是slot,是组件的一块HTML模板,这块模板

  • Vue.js slot插槽的作用域插槽用法详解

    目录 没有插槽的情况 Vue2.x 插槽 有插槽的情况 具名插槽 没有slot属性 插槽简单实例应用 作用域插槽 ( 2.1.0 新增 ) Vue3.x 插槽 插槽 作用域插槽 没有插槽的情况 <div id="app"> <child> <span>1111</span> </child> </div> <script> // 注册子组件 Vue.component("child"

  • Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

    1.slot作用/概念:预先将将来要使用的内容进行保留: 2.具名插槽:给slot起个名字 3.slot.slot-scope已经被废弃推荐使用vue2.6.0中的v-slot:但是这边还是对新旧方法对做一下使用说明. slot插槽(不具名) <body> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div> <template id

  • Vue作用域插槽slot-scope实例代码

    vue中的插槽有三种:单个插槽.具名插槽.作用域插槽,这个在官网上能看到 (https://cn.vuejs.org/v2/guide/components.html#单个插槽) 作用域插槽简单来说就是父组件只管显示样式,数据由子组件来提供.比如上面的代码,el-table-column内的template是传递给其内部solt的显示内容,但是scope的值是由el-table-column内部solt绑定的数据返回的.这个数据具体是什么由el-table-column中指定,类似: <slot

  • vue作用域插槽详解、slot、v-slot、slot-scope

    目录 vue 插槽slot和具名插槽 作用域插槽的核心作用是 实例说明 子组件 父组件 效果图 vue 插槽slot和具名插槽 作用都是在调用组件的时候传递一些DOM结构进去, 不同点是:具名插槽在传递DOM时需要声明,传递给哪个slot的名字 name 他们用法简单不在赘述. 重点说一下作用域插槽 slot-scope 的使用,以及vue2.6.X开始的新语法v-slot 作用域插槽的核心作用是 子组件给父组件传递数据,当然也包含上述插槽的能力 老版作用域插槽, slot="test"

  • vue和react中关于插槽详解

    目录 简述Slot 基本插槽 vue基本插槽 react基本插槽 具名插槽 vue具名插槽 react具名插槽的讨论 模仿具名插槽 属性插槽 插槽传参 vue插槽传参 react:render-props 简述Slot slot插槽是Vue对组件嵌套这种扩展机制的称谓,在react可以也这样称呼,但是并不很常见.不过叫slot确实很形象. 这样的形式就是slot插槽: vue <template> <container-comp> <content></conte

  • Vue渲染函数详解

    前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器.本文将详细介绍Vue渲染函数 引入 下面是一个例子,如果要实现类似下面的效果.其中,H标签可替换 <h1> <a name="hello-world" href="#hello-world" rel="external nofol

  • Vue.js用法详解

    vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 前  言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: V

  • Vue props用法详解(小结)

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件:子组件通过 events 给父组件发送消息. 父子级组件 比如我们需要创建两个组件 parent 和 child.需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性. 这里我们先定义父子两个组件和一个 Vue 对象: var childNode = { templat

  • node创建Vue项目步骤详解

    vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟. Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用. 首先Vue的安装依赖于node.js,要保证你的计算机上已经安装过node.js. 如何查看node是否安装或者node版本呢? 进入cmd,输入命令 node -v,回车查看.node最好使用新一些的版本,否则后续

  • Vue中 Vue.prototype使用详解

    目录 1. 基本示例 2. 为实例prototype设置作用域 3. 注册和使用全局变量 4. 原型方法的上下文 5. 应用示例 5.1 引入 axios Vue.prototype.Vue.component和Vue.use区别 1.Vue.prototype 2.vue.component 3.Vue.use 我们可能会在很多组件里用到数据/实用工具,但是不想污染全局作用域.这种情况下,可以通过在原型上定义它们使其在每个 Vue 的实例中可用. 1. 基本示例 在main.js中添加一个变量

  • Vue自定义事件(详解)

    前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Events interface),即 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是 $on 和 $emit 不是addEventListener 和 disp

  • 通过npm引用的vue组件使用详解

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创

  • JavaScript作用域示例详解

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域示例详解的介绍,希望能帮助大家更好的学习JavaScript. 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 一.JavaScript中无块级作用域 在Java或C#中存在块级作用域

随机推荐