位置: 编程技术 - 正文

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

  • 不缴或少缴应纳税款的处罚措施
  • 采用现金支付
  • 车船税保险公司会不会多收
  • 会员退费怎么算
  • 地下建筑物应该怎样缴纳城镇土地使用税?
  • 交了定金签了合同
  • 纳税人减免税备案登记表是在税务局领吗
  • 来料加工税务账应采取哪种核算方式?
  • 代开专票地税没交怎么办?
  • 计提所得税是在哪个科目
  • 免租要怎么交税
  • 残疾人保障金中的工资总额包括福利费用吗
  • 奖金能否和工资一起发放
  • 工会经费什么时候返还给企业
  • 合同取得成本与销售费用
  • 公司没有残疾人需要缴纳残保金吗
  • 小企业递延收益计算公式
  • 外聘人才一次性工资费用入账什么分录?
  • 财政拨款收入如何记账
  • 增值税专用发票查询系统官方网站
  • 怎么防止电脑被别人远程控制
  • 员工报销款应该挂什么科目
  • 应付职工薪酬账户结构
  • 银行承兑汇票开出后多久可以签收
  • 线程是什么意思
  • rtos有什么用
  • 发票开出后对方不付款
  • 对公账户存款利息要交增值税吗
  • 系统win7旗舰版
  • 国有企业融资方案比较
  • 生产成本制造费用怎么算
  • 不合格的设备怎么处理
  • vuecli打包项目
  • 出口货物应退增值税如何计算
  • 特征融合add
  • laravel实战教程
  • php实现会话的步骤
  • php的序列化操作生成的哪种格式
  • 申报经营所得成绩怎么填
  • 销售鸡蛋免增值税吗
  • 公司给买员工保险
  • mybatis拦截器执行顺序
  • sql实例命名规则
  • 什么时候过路费减半收费
  • 利润分配未分配利润期末有余额吗
  • 一次还本付息债券定价公式
  • 关税完税价格计算增值税
  • 印花税该是如何征收的
  • 工程施工企业收入1750万,利润怎么算
  • 行政单位可以对外进行投资吗?
  • 费用没有发票先开什么
  • 企业收到返利怎么做账
  • 福利费以后年度可以抵扣吗
  • 实报实销有补贴嘛
  • 销项税大于进项税后,税金如何算
  • 开发项目设计费放入什么科目
  • 净资产收益率怎么算出来的
  • hyper-v虚拟机无法初始化
  • xp系统net framework 3.5
  • linux谷歌浏览器安装指令
  • Fatal server error: could not open 无法进图形界面的解决办法
  • kpupgrader.exe是什么
  • perfom.exe
  • pebble框架
  • css制作排行榜
  • js调用方法什么时候要加括号
  • python web开发环境搭建
  • 关于jquery的用途
  • 使用node写接口
  • unity向量的规范化
  • ie8不支持
  • js制作网页制作步骤
  • android中适配器
  • Android中使用HttpURLConnection和HttpClient实现GET和POST请求访问网络
  • 捐赠收费吗
  • 银行开业送什么花
  • 深圳微信税务局登录不了
  • 云南省电子税务
  • 中国税务网官网1732171695993732.2418.61431871
  • 中国进口奶粉关税税率表2019
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设