简而言之,作用域插槽就是让插槽内容能够访问子组件中的数据。


案例如下:有CurUser组件

<template>
<span>
<!-- 在slot 元素上绑定user,让父组件插槽能够访问 -->
<slot :user="user"></slot>
</span>
</template> <script>
export default {
data() {
return {
user: {
firstName: "张",
lastName: "三"
}
}
}
}
</script>
<style scoped>
</style>

使用组件

        <cur-user>
<!-- 使用slot-scope 或者v-slot 来接收-->
<template slot-scope="scope">
{{scope.user.firstName}} {{scope.user.lastName}}
</template>
</cur-user>

vue作用域插槽的更多相关文章

  1. vue作用域插槽的应用

    问题场景: 存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果, 我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问 ...

  2. 细说Vue作用域插槽,匹配应用场景。

    最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...

  3. vue 开发系列(十) VUE 作用域插槽

    使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...

  4. Vue作用域插槽:用作循环结构的模版

    一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list=&q ...

  5. Vue作用域插槽:基本用法

    一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <user v-slot:de ...

  6. 新版vue作用域插槽的使用

    2.6开始,作用域插槽的使用有了不同的地方: 作用域插槽的个人理解就是让子组件的数据可以在父组件中使用:  也是一个数据传递的方式了: 不多说,上代码 子组件定义一个插槽,并且定义一个需要传递到父组件 ...

  7. Vue 作用域插槽

    使用场景:复用子组件的slot,又可以使slot的内容不一样. <!DOCTYPE html> <html lang="zh"> <head> ...

  8. vue作用域插槽实践

    引言 我在练手的时候发现后端返回的数据可以通过两种方式渲染 (自己遇到的 可能你都会 哈哈哈) 后端传过来的数据函数 from django.http import JsonResponse def ...

  9. Vue的作用域插槽

    一.通常情况下都是父组件传递数据给子组件进行展示的(无法改变子组件的展示方式):而作用域插槽允许子组件通过slot向父组件传递数据,类似React中的“以函数为子组件”,由父组件决定渲染的内容(包含绑 ...

随机推荐

  1. 一百三十九:CMS系统之首页帖子列表布局

    # 配置ueditor上传文件到七牛UEDITOR_UPLOAD_TO_QINIU = True # 设置为True是,视为开始把图片传到七牛储存,本地不储存UEDITOR_QINIU_ACCESS_ ...

  2. iOS-self.用法

    关于self.用法的一些总结 2010-01-10 21:46 最近有人问我关于什么时候用self.赋值的问题, 我总结了一下, 发出来给大家参考. 有什么问题请大家斧正. 关于什么时间用self. ...

  3. 在C/C++中常用的符号

    C++中&和*的用法一直是非常让人头疼的难点,课本博客上讲这些知识点一般都是分开讲其用法的,没有详细的总结,导致我在这方面的知识结构格外混乱,在网上找到了一篇英文文章简单总结了这两个符号的一些 ...

  4. Android_7.1.1_r6源码编译

    上篇文章讲述了如何下载Android源码,在篇文章就来说一说Android源码编译.其实一般来说如果修改的软件和底层没什么关系,直接提取相应的源代码到Android Studio编译就可以了,如果是与 ...

  5. Leetcode 224/227/772 计算器

    题目描述 Leetcode 224 Leetcode 224: 这里想让我们实现一个基础的计算器,来计算给定的字符串. 给定的字符串中包含 ( ) + - 和非负整数和空格. # Example 1: ...

  6. nginx rewrite 规则

    rewrite功能:使用nginx提供的全局变量或自设定的变量,结合正则表达式和标志位实现url重写以及重定向. 配置域:server,localtion. flag标志位     last : 相当 ...

  7. 用户字符串操作,这里面包括字符串的decode、encode、substract等等操作

    工具类描述:用户字符串操作,这里面包括字符串的decode.encode.substract等等操作 package cn.hgnulb; import java.io.UnsupportedEnco ...

  8. 【转帖】计算机网络协议(三)——UDP、TCP、Socket

    计算机网络协议(三)——UDP.TCP.Socket 2019年09月04日 11:09:41 to_be_better_one 阅读数 28794 文章标签: 计算机网络UDPTCPSocket 更 ...

  9. C++视频读取与视频保存

    VideoCapture cap("E:\\122.avi"); //计算视频帧数 int VedioFPS = cap.get(CV_CAP_PROP_FPS); //cout ...

  10. MySQL之创建用户和授权

    一 权限管理 我们知道我们的最高权限管理者是root用户,它拥有着最高的权限操作.包括select.update.delete.update.grant等操作.那么一般情况在公司之后DBA工程师会创建 ...