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类库D
Oct 24 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
springboot+vue实现文件上传下载
Nov 17 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
php5.2时间相差8小时
2007/01/15 PHP
php 前一天或后一天的日期
2008/06/28 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Python collections模块使用方法详解
2019/08/28 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
大一新生检讨书
2014/10/29 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android