位置: 编程技术 - 正文

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

  • 车辆购置税税收优惠
  • 税款代码
  • 增值税进项税额加计抵减会计处理
  • 以前多摊销
  • 银行转账支付计入什么科目
  • 以前年度损益调整影响本年利润
  • 耕地占用税的纳税人是谁
  • 开票显示错误信息是怎么回事
  • 英国租金收入所得税
  • 计提坏账准备确认的信用减值损失累计金额
  • 公司代扣代缴的个人所得税怎么做账
  • 金税四期进展
  • 如何确认是否要割包皮
  • 经营租赁固定资产折旧计入什么科目
  • 在建工程转固定资产后如何计提折旧
  • 生产成本转入库存商品金额怎么算
  • 残保金属于职工薪酬吗
  • 外币报表折算差额为负数代表
  • 销货成本销货成本是什么类账户
  • 进口货物取得什么证书
  • mac怎么连接校园网网线
  • 教您电脑网速很慢怎么办
  • 其他应付款不用付了会计分录
  • 产生的投资收益怎么算
  • 公司车辆报废收入怎么入账
  • 评标专家评审费应该谁来付
  • deepin 文件管理器
  • php防止网站被攻击怎么办
  • 怎么修改以前年度的账
  • 其他费用的账务处理
  • 增值税进项税转出什么意思
  • 在php中,字符串有哪些表示形式
  • 转出未交增值税和未交增值税区别
  • 银行票据贴现业务发展中遇到的困难
  • fetchall的用法
  • nodejs安装及环境配置win10
  • 玉兰种院子什么方位
  • 坏账准备属于哪一类账户
  • 直接材料成本差异账户在平时登记贷方登记
  • vue带参数跳转到详情页面
  • php截取文件后缀名方法
  • php traits
  • journal.tmp
  • linux0.11编译
  • 小规模固定资产处置税率
  • 残疾人就业保障金
  • 固定资产停止使用还要折旧吗
  • java获取resources下文件路径
  • 企业当年实现的利润属于哪类会计科目
  • 法人向公司账户打款合法吗
  • mysql all
  • 企业弥补以前年度亏损要怎么填表
  • 原材料用于在建工程要进项转出吗
  • 支付结算办法实施细则最新
  • 实发工资高于工资表
  • 固定资产加速折旧纳税调整
  • sql实现行列转换
  • sqlserver 触发器 if 后边没执行
  • ubuntu邮箱客户端
  • linux 文件执行
  • linux yum安装apache
  • centos6.6
  • win7休眠模式在哪
  • xp sp3精简版
  • win7架设ftp服务器
  • cocos2dx怎么打开
  • bat批处理命令教程
  • Node.js中的全局对象有
  • vue@cli
  • 举例详解民法典第994条
  • unity3D游戏开发
  • centos 安装完成后无法启动
  • Python 'takes exactly 1 argument (2 given)' Python error
  • 使用jQuery Ajax 请求webservice来实现更简练的Ajax
  • javascript语言入门教程
  • 国家税务局网站发票验真伪
  • 纳税信用b级可以贷款多少
  • 电子税务局密码能随便告诉别人吗
  • 纳税人识别号和公司税号一样吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设