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实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 Javascript
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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
Python 流程控制实例代码
2009/09/25 Python
python实现神经网络感知器算法
2017/12/20 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
学Python 3的理由和必要性
2019/11/19 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
C语言基础笔试题
2013/04/27 面试题
函授毕业个人自我评价
2014/02/20 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
店铺转让协议书
2014/12/02 职场文书