python中scope的用法_理解vue中的scope的使用

理解vue中的scope的使用

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

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

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

如下模板页面：

Vue-scope的理解

姓名:{{scope.row.name}}

年龄: {{scope.row.age}}

性别: {{scope.row.sex}}

索引：{{scope.$index}}

new Vue({

el: '#app',

data() {

return {

data: [

{

name: 'kongzhi1',

age: '29',

sex: 'man'

},

{

name: 'kongzhi2',

age: '30',

sex: 'woman'

}

]

}

},

methods: {

}

});

js 代码如下：

Vue.component('tb-list', {

template: '#tb-list',

props: {

data: {

type: Array,

required: true

}

},

data() {

return {

}

},

beforeMount() {

},

mounted() {

},

methods: {

}

});

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

data: [

{

name: 'kongzhi1',

age: '29',

sex: 'man'

},

{

name: 'kongzhi2',

age: '30',

sex: 'woman'

}

]

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

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

姓名:{{scope.row.name}}

年龄: {{scope.row.age}}

性别: {{scope.row.sex}}

索引：{{scope.$index}}

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

{"row":{"name":"kongzhi1","age":"29","sex":"man"},"$index":0}

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

{"row":{"name":"kongzhi2","age":"30","sex":"woman"},"$index":1}

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

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

查看页面效果；

理解Vue中的Render渲染函数

理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

深刻理解Vue中的组件

转载:https://segmentfault.com/a/1190000010527064 --20更新: Vue2.6已经更新了关于内容插槽和作用域插槽的API和用法,为了不误导大家,我把插槽的内 ...

【转】简单理解Vue中的nextTick

前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...

简单理解Vue中的nextTick

Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

深入理解vue中的slot与slot-scope

from:https://segmentfault.com/a/1190000012996217?utm_source=tag-newest 写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练 ...

怎样理解 Vue 中的计算属性 computed 和 methods ?

需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...

深入理解 vue 中 scoped 样式作用域的规则

哈喽!大家好!我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的 ...

理解angularJS中作用域$scope

angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

随机推荐

vue组件

分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...

学习Linux系列--安装软件环境

本系列文章记录了个人学习过程的点点滴滴. 回到目录 10.安装Lamp套件. 最简单的方式,如下 sudo tasksel install lamp-server Apache 菜鸟教程 Ubuntu ...

Bind的DNS解析设置forward - 阿权的书房

bind有一项功能是forward,也就是只是做dns缓存. 适用以下情况: 1 做临时测试,不想向上级申请修改ns记录2 不想向上级申请修改ns记录但希望交给另外的服务器处理3 只有有限的公网IP, ...

mac下pmset的使用方法

在终端输入:pmset -g custom    这个命令可以显示系统所有的电源设置 lidwake: 当屏幕掀开的时候唤醒Mac,1是开启  0是关闭autopoweroff: 如果Mac处于睡眠状 ...

Android IOS WebRTC 音视频开发总结(五九)-- webrtc这蛋糕都怎么吃？

本文主要介绍webrtc应用状况,文章最早发表在我们的微信公众号上,详见这里,欢迎关注微信公众号blackerteam,更多详见www.blackerteam.com WebRTC是个好东东,就好比是 ...

asp.net连接oracle无法进行中文字符查询的问题

用 select * from nls_database_parameters where parameter = 'NLS_CHARACTERSET' 查询服务器字符集为 AL32UTF8 数据库连 ...

py库：threading

https://www.youtube.com/watch?v=DnTn3Yx-Nvg  join功能: import threading import time def thread_job2(): ...

Git&GitHub-进阶教程

目录 1. 远程仓库-GitHub 1.1 本地电脑如何关联GitHub? 1.2. 创建并操控远程库GitHub (1) 把一个已有的本地仓库与之关联,然后,把本地仓库的内容推送到GitHub仓库. ...

Excel GET.DOCUMENT说明

GET.DOCUMENT(type_num, name_text) Type_num    指明信息类型的数.下表列出 type_num 的可能值与对应结果. Type_num        返回 1 ...

resttemplate 文件上传 上传文件

springmvc RestTemplate文件上传 RestTemplate上传文件总结