位置: 编程技术 - 正文

vue中的scope使用详解(vue scoped属性作用?实现原理)

编辑:rootadmin

推荐整理分享vue中的scope使用详解(vue scoped属性作用?实现原理),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中scoped作用原理,vue中的scoped,vue中scoped有什么用,vue scope-slot,vue scope-slot,vue scope-slot,vue中的scoped,vue scope,内容如对您有帮助,希望把文章链接给更多的朋友!

我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值,获取到的值是一个对象。

注意:scope="它可以取任意字符串";

上面已经说了 scope获取到的是一个对象,是什么意思呢?我们先来看一个简单的demo就可以明白了~

如下模板页面:

js 代码如下:

上面代码我们注册了一个叫 tb-list 这么一个组件,然后给 tb-list 传递了一个data属性值;该值是一个数组,如下值:

tb-list组件模板页面是如下:

vue中的scope使用详解(vue scoped属性作用?实现原理)

遍历data属性值,然后使用slot来接收 tb-list组件中的任何内容;其内容如下:

最后在模板上使用scope来接收slot中的属性;因此scope的值是如下一个对象:

因为遍历了二次,因此还有一个是如下对象;

从上面返回的scope属性值我们可以看到,scope返回的值是slot标签上返回的所有属性值,并且是一个对象的形式保存起来,该slot有两个属性,一个是row,另一个是$index, 因此返回 {"row": item, "$index": "index索引"}; 其中item就是data里面的一个个对象。

最后页面被渲染成如下页面;

查看页面效果;

总结

以上所述是小编给大家介绍的vue中的scope使用详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言!

轻松理解vue的双向数据绑定问题 Vue介绍Vue是当前很火的一款MVVM的轻量级框架,它是以数据驱动和组件化的思想构建的。因为它提供了简洁易于理解的api,使得我们很容易上手。Vue与MVVM

Vue中正确使用jQuery的方法 题主Vue小白,入门demo时想在其中使用jQuery(当然可能是不推荐的做法哈,毕竟俩儿的风格不一样,但万一你就需要呢_^^_),结果遇到问题,最终倒腾解

Angularjs按需查询实例代码 课程信息管理界面有这样一个需求,当课程类型为公选课的时候,可以选择课程性质,当为其他课程类型的时候,不必选择课程性质。代码:/***获取课

标签: vue scoped属性作用?实现原理

本文链接地址:https://www.jiuchutong.com/biancheng/375836.html 转载请保留说明!

上一篇:Vue.js划分组件的方法(vue js组件)

下一篇:轻松理解vue的双向数据绑定问题(vue是如何实现双向绑定的)

  • 已认证进项税额转出会计分录账务处理
  • 生产企业免抵退税
  • 小规模销售收入免税会计分录
  • 本月发生费用未支付会计处理
  • 报销金额大于发票金额几毛钱
  • 公司两个股东各占50%股份,法人是股东
  • 三证合一后个体户注销流程
  • 年报中资产总额和所有者权益都填0
  • 电算化怎么操作
  • 银行承兑汇票贴现利率一般多少
  • 网上缴税后会有发票吗
  • 申报抵扣了不做账怎么处理?
  • 进项税已入账未结转
  • 原材料保险公司赔偿会计分录怎么写
  • 境外企业向境内国外汇款
  • 品种法完工产品成本的单位成本怎么算
  • 工业企业月末结转分录
  • 建筑工程属于开票项目吗
  • 无偿受让股权的股东对发起股东没有出资承担责任
  • 企业所得税计提金额怎么算
  • 公休假补贴多少钱
  • 合并财务报表的特点
  • lec风险评价方法
  • 所得税预缴资产怎么计算
  • 商品损耗怎么做会计分录
  • 个税经营所得申报常见问题答疑
  • macbook怎么压缩视频大小
  • 留存收益净利润之间关系
  • 如何解决WIN10系统文件夹只读属性不能更改
  • 外购的福利费要转出吗
  • php常见面试题
  • php技巧
  • 向客户收费
  • php怎么传递参数
  • 会计科目分类有几种方法
  • node实战
  • code .命令
  • 固定资产清理属于非流动资产吗
  • 结存成本怎么计算先进先出法
  • 汽车上牌照的费用计入什么会计科目
  • 个人所得税专项附加扣除标准一览表
  • 注册机械加工公司需要什么
  • 股东出资不足需要赔偿吗
  • phpcms专题页面模板
  • sql注入漏洞不会出现在哪个位置
  • 坏账计提方法会计政策
  • 其它应付款的审计内容
  • 没有收入如何做账
  • sql server获取字段长度
  • 增值税附加税的比例
  • 其他应付款货方余额表示什么
  • 固定资产变动方式名称
  • 房地产资质代办需要多少钱
  • 报名费无发票要补交吗
  • 建筑工程公司收入来源
  • 出口退税哪些商品不能退
  • 企业其他应付款增加的原因
  • 计提利息为什么贷方是应付利息
  • mysql如何导出数据
  • 一个分页存储过多的文件
  • 利用pt-heartbeat监控MySQL的复制延迟详解
  • mysql5.7安装教程详细
  • win10系统电脑如何共享
  • centos7怎么查看进程名称吗
  • unix操作系统命令
  • 注册表c盘桌面路径改为d盘
  • xp系统如何禁止软件联网
  • centos支持哪些cpu
  • 电脑pc的操作系统叫什么
  • surface pro7应用
  • windows升级后照片不见了
  • JavaScript数组删除元素
  • 安卓运行环境搭建
  • opengl基础知识
  • JavaScript数据类的特点
  • javascript 继承
  • 进口设备免关税政策融资费
  • 公司可以报停吗
  • 经济补偿金如何计税
  • 微信申报缴税流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设