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


案例如下:有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. Jenkins加入systemctl管理

    Jenkins安装目录为 /usr/local/jenkins-tomcat/ 添加文档 /usr/lib/systemd/system/jenkins.service [Unit] Descript ...

  2. iOS-iphone网络编程总结

    iphone网络编程总结 一:确认网络环境3G/WIFI 1. 添加源文件和framework        开发Web等网络应用程序的时候,需要确认网络环境,连接情况等信息.如果没有处理它们,是不会 ...

  3. CF C.Ivan the Fool and the Probability Theory【思维·构造】

    题目传送门 题目大意: 一个$n*m$的网格图,每个格子可以染黑色.白色,问每个格子最多有一个相邻格子颜色相同的涂色方案数$n,m<=1e5$ 分析: 首先,考虑到如果有两个相邻的格子颜色相同, ...

  4. 给定一个字符串str,将str中连续两个字符为a的字符替换为b(一个或连续超过多个字符a则不替换)

    需求:给定一个字符串str,将str中连续两个字符为a的字符替换为b(一个或连续超过多个字符a则不替换) 如: a 不替换 b 不替换  ab 不替换 ba 不替换 aba 不替换  aab 替换为 ...

  5. [转帖]一个关于国密SM4的故事

    一个关于国密SM4的故事 https://www.cnblogs.com/ouyida3/p/10053862.html SM1 硬件SM2 非对称加密SM3 hash算法SM4 对称加密 一个关于国 ...

  6. Hadoop配置环境变量Program~2的用法

    [学习笔记] 3)配置环境变量:(环境变量中的~1,~2,~3的用法)i)JAVA_HOME:注意C:\Program Files目录存在空格,变成C:\Progra~1\Java\jdk1.8.0_ ...

  7. IDEA使用 maven 搭建 SSM 框架

    文章目录 pom 文件的编写 项目结构 SSM 配置文件的编写 web.xml 的配置 总结 公司有个小的内部使用的软件,让开发,自己选择使用 SSM :因为之前自己学过,本以为一切水到渠成,但是好久 ...

  8. LC 33. Search in Rotated Sorted Array

    问题描述 Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. ...

  9. # VsCode 配置C++调试运行

    VsCode 配置C++调试运行 打开命令面板快捷键为F1,软件上写的Ctrl+Shift+P似乎没用 先安装插件使得可以运行 先自行在vsc扩展中搜索C++安装C/C++插件 再参考知乎专栏中安装c ...

  10. js — 基础知识

    目录 1. js的介绍 2. js的引入方式 3. js语句 4. 变量 js ( Javascript ) - 脚本语言 1. js的介绍 Javascript是一种运行在浏览器中的解释型的编程语言 ...