vue中的scope使用详解


Posted in Javascript onOctober 29, 2017

我们都知道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" rel="external nofollow" />
 <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使用详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言!

Javascript 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
微信小程序工具函数封装
Oct 28 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
浅谈克隆 JavaScript
Nov 02 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
Vue.js划分组件的方法
Oct 29 #Javascript
vue.js  父向子组件传参的实例代码
Oct 29 #Javascript
vue.js todolist实现代码
Oct 29 #Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 #Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 #jQuery
bootstrap table sum总数量统计实现方法
Oct 29 #Javascript
vue.js语法及常用指令
Oct 29 #Javascript
You might like
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
小程序实现tab标签页
2020/11/16 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
python3抓取中文网页的方法
2015/07/28 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python利用IPython提高开发效率
2016/08/10 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python求绝对值的三种方法小结
2019/12/04 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
小学生常见病防治方案
2014/06/06 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript