位置: 编程技术 - 正文

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

  • 建筑安装增值税纳税地点
  • 公益组织收到捐赠款计入什么科目
  • 未开票收入下月开票怎么报税
  • 甲是乙公司依法设立的分公司
  • 其他综合收益税后
  • 税费漏报
  • 企业所得税汇算清缴退税怎么做账
  • 退增值税政策
  • 职工食堂开支会计处理
  • 工会经费自留比例
  • 计提工资后发放时结转到什么科目
  • 企业开办费用的预算
  • 财产清查的种类有哪些
  • 面条适用的增值税率是
  • 减税降费政策六税
  • 年终奖扣税标准计算器
  • 物资包括材料吗
  • 已经开了的发票可以打销货清单吗
  • 附加税退款分录
  • 企业投资股票取什么名字
  • 进料加工出口退税计算 计划分配率
  • 内存频率调整教程图解
  • 收到的进项发票要在多久前认证
  • win11任务管理器在哪里打开
  • 联想win10自动修复失败还能保存文件吗
  • 外资企业采购退税流程
  • php常用设计模式(大总结)
  • 销售折扣的税票怎么开
  • 查补以前年度收入
  • 有了php源码该如何使用 新手
  • 公司员工借款怎么做账
  • 增值税专用发票查询系统官方网站
  • wordpress简码怎么用
  • php实现文件上传需要使用哪个全局变量
  • vue项目如何配置启动的端口
  • javaweb实验一
  • 精选100个Python实战项目案例,送给缺乏实战经验的你
  • okhttp源码
  • 车船税每年都要付吗
  • 无法支付其他应用怎么办
  • 公司租车公司
  • 年报超时了可以补报吗
  • 退回发票金额是什么意思
  • sqlserver怎么把数据库导出来
  • 资产减值损失包括什么
  • 企业应付账款科目的借方余额反映的是
  • 金蝶凭证汇总表怎么打印
  • 生产企业的模具费用计入什么科目
  • 公允价值变动损益和投资收益区别
  • 应交税费应交增值税借贷方向
  • 已认证的发票开具红字发票账务处理?
  • 租来设备本身原因致人损害
  • 处理旧固定资产税率
  • 手工账明细账怎么登记
  • 商贸企业的销售成本怎么算
  • 外贸整个流程图
  • windows怎么查看
  • 硬盘安装在机箱内,属于主机的组成部分
  • win8的系统
  • ubuntu login用户名
  • 屏保 win7
  • linux启动u盘制作
  • centos6.9
  • win8如何安装
  • vr moke
  • 学习英语
  • javascript怎么弄
  • 机械革命系统重装官方教程
  • unity如何导入资源文件
  • unity f1
  • MATLAB图像处理实例详解
  • javascript要怎么学
  • nodejs cgi
  • python发送邮件的模块
  • js如何动态添加class
  • 广东省电子税务局电话
  • 京东发票税号是几位数
  • 税务宪法宣传简报
  • 2020年税务系统关闭
  • 税务打虚打骗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设