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 相关文章推荐
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
layui表格数据重载
Jul 27 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
JS精确判断数据类型代码实例
Dec 18 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
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
自适应图片大小的弹出窗口
2006/07/27 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
DWR Ext 加载数据
2009/03/22 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python之web模板应用
2017/12/26 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
Python 如何测试文件是否存在
2020/07/31 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
公证委托书标准格式
2014/09/11 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
大连导游词
2015/02/12 职场文书
清洁员岗位职责
2015/02/15 职场文书
活动总结书怎么写
2015/05/11 职场文书
总经理聘用协议书
2015/09/21 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书