位置: 编程技术 - 正文

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是如何实现双向绑定的)

  • 增值税附加税是几个点
  • 贸易公司开发票进项跟销项不符合怎么办
  • 税前利润等于应纳税所得额吗
  • 实收资本变动额怎么算
  • 网购商品怎么报销
  • 公司提供住宿员工在外居住出现问题
  • 一般纳税人厂房出租怎么开票
  • 所得税季报什么时间扣款
  • 收到投资款怎么做账
  • 出现哪些情形纳入医保
  • 保修期内免费维修
  • 承兑贴现给个人怎么做账
  • 企业无形资产摊销表述不正确
  • 向消费者支付佣金怎么算
  • 房地产企业预收款什么时候确认收入
  • 旅游业开办费
  • 坏账损失如何连续计提
  • 劳务派遣 税务
  • 个人所得税征收范围
  • 对于目标文件系统文件过大无法删除
  • linux deepin怎么样
  • win11如何设置定时关机
  • u盘安装pe系统
  • paddle!
  • 赔偿款支出会计处理
  • PHP:token_get_all()的用法_Tokenizer函数
  • 怎么做合同
  • 电脑桌面小工具软件
  • vue多模块多项目集成
  • 分类账长什么样
  • 怎么算土地增值税
  • 分页page
  • YII Framework的filter过滤器用法分析
  • 增量留抵税额是
  • 基于YOLOv5的中式快餐店菜品识别系统
  • php消除警告
  • 是否就地汇总纳税
  • 收到退税款怎么做账
  • 原始凭证分割单样本图片
  • 如何解决面颊毛孔粗大
  • 织梦相关文章调用
  • 不动产租赁需要资质吗
  • 长期股权投资收益要交企业所得税吗
  • SQLServer 2008 Merge语句的OUTPUT功能
  • 消防工程改造方案
  • 如果租房没有合同怎么办
  • 经营范围中没有这个项目开票后果
  • 发票 认证抵扣
  • 保障房异地建设费属不属于土地成本
  • 递延所得税资产和递延所得税负债
  • 流动资产周转率和总资产周转率
  • 工商营业执照变更网上怎么操作
  • 应付职工薪酬包括辞退福利吗
  • 非流动资产基金对应的新科目
  • 财产裁定书
  • 分批法成本核算对象
  • windows key查询
  • vtpwsr
  • win10预览版21h2
  • win8.1怎么样?
  • 重装系统后要重装软件吗
  • yum源有什么用
  • win10电脑cmd命令大全
  • win7系统鼠标指针形状介绍
  • perl字符串长度函数
  • Bullet(Cocos2dx)之凸多面体形状和组合形状
  • javascript对象的属性和方法
  • 注释标签的内容会显示在浏览器窗口中
  • javascript常见的数据类型
  • jquery怎么实现分页功能
  • 宁波鄞州区行政区划代码
  • 龙华区有几个地方
  • 网上报税失败怎么办
  • 金华市税务
  • 江苏地方税务局2013招考公告
  • 海口税务服务大厅
  • 车船使用税税
  • 全国城管改革什么时候结束
  • 国外工资个人所得税
  • 专家咨询费包括哪些内容
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设