理解vue中的scope的使用
我们都知道vue slot插槽可以传递任何属性或html元素，但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值，获取到的值是一个对象。
注意：scope="它可以取任意字符串";
上面已经说了 scope获取到的是一个对象，是什么意思呢？我们先来看一个简单的demo就可以明白了~
如下模板页面：
<!DOCTYPE html>
<html>
<head>
<title>Vue-scope的理解</title>
<script src="./libs/vue.js"></script>
<link rel="stylesheet" href="./css/index.css" />
<script src="./js/scope.js"></script>
</head>
<body>
<div id="app">
<tb-list :data="data">
<template scope="scope">
<div class="info" :s="JSON.stringify(scope)">
<p>姓名:{{scope.row.name}}</p>
<p>年龄: {{scope.row.age}}</p>
<p>性别: {{scope.row.sex}}</p>
<p>索引：{{scope.$index}}</p>
</div>
</template>
</tb-list>
</div>
<script id="tb-list" type="text/x-template">
<ul>
<li v-for="(item, index) in data">
<slot :row="item" :$index="index"></slot>
</li>
</ul>
</script>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
data: [
{
name: 'kongzhi1',
age: '29',
sex: 'man'
},
{
name: 'kongzhi2',
age: '30',
sex: 'woman'
}
]
}
},
methods: { }
});
</script>
</body>
</html>
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组件模板页面是如下：
<ul>
<li v-for="(item, index) in data">
<slot :row="item" :$index="index"></slot>
</li>
</ul>
遍历data属性值，然后使用slot来接收 tb-list组件中的任何内容；其内容如下：
<template scope="scope">
<div class="info" :s="JSON.stringify(scope)">
<p>姓名:{{scope.row.name}}</p>
<p>年龄: {{scope.row.age}}</p>
<p>性别: {{scope.row.sex}}</p>
<p>索引：{{scope.$index}}</p>
</div>
</template>
最后在模板上使用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中的scope的使用的更多相关文章
-
理解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应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...
随机推荐
-
JS 中如何判断 undefined 和 null
JS 中如何判断 undefined JavaScript 中有两个特殊数据类型:undefined 和 null,下节介绍了 null 的判断,下面谈谈 undefined 的判断. 以下是不正确的 ...
-
HDU 4930 Fighting the Landlords（模拟）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4930 解题报告:斗地主,加了一个四张可以带两张不一样的牌,也可以带一对,判断打出一手牌之后,如果对手没 ...
-
Openstack命令行删除虚拟机硬件模板flavor
openstack中,有一种概念叫flavor,其实flavor就是一种创建虚拟机的硬件尺寸模板化.比如我先创建一个flavor,该flavor包含的CPU数目,内存大小,硬盘大小都预先设置好,在创建 ...
-
IOS之UI--小实例项目--添加商品和商品名（使用xib文件终结版） + xib相关知识点总结
添加商品和商品名小项目(使用xib文件终结版) 小贴士:博文末尾有项目源码在百度云备份的下载链接. xib相关知识点总结 01-基本使用 一开始使用xib的时候,如果要使用自定义view的代码,就需要 ...
-
floyd详解
就不在来回搬了 请看 http://note.youdao.com/groupshare/?token=6422E952998F4381A1534B71359EFA57&gid=1579165 ...
-
ubuntu 安装RPM软件包
red hat 系统用rpm格式的文件安装软件,ubuntu安装软件是用deb格式的文件安装 在ubuntu上安装rmp文件格式的软件包步骤: 1.安装转换软件 alien(需要联网) apt-get ...
-
requests从api中获取数据并存放到mysql中
python的requests库是一个非常强大的库,requests的安装方法十分简单,用: pip install requests 即可安装requests,安装成功后: import reque ...
-
spring quartz开发中使用demo
1.首先在pom.xml中配置quartz的jar: <!--定时器--> <dependency> <groupId>org.quartz-scheduler&l ...
-
分布式框架Dubbo入门
Dubbo简介 Dubbo是一个Alibaba开源额分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.dubbo就是个服务框架,只有在分布式的时候,才有dubb ...
-
C# — 调用dll出现试图加载不正确格式的程序问题
今天在调用百度dll包时,运行项目出现了如下警告: 修改:鼠标右击项目名称----选择属性----生成-----平台目标-----X64(由于我调用的是X64的dll包,所以这里选择X64,网上许多说 ...