理解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的使用的更多相关文章

  1. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  2. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  3. 深刻理解Vue中的组件

    转载:https://segmentfault.com/a/1190000010527064 --20更新: Vue2.6已经更新了关于内容插槽和作用域插槽的API和用法,为了不误导大家,我把插槽的内 ...

  4. 【转】简单理解Vue中的nextTick

    前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...

  5. 简单理解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  6. 深入理解vue中的slot与slot-scope

    from:https://segmentfault.com/a/1190000012996217?utm_source=tag-newest 写在前面 vue中关于插槽的文档说明很短,语言又写的很凝练 ...

  7. 怎样理解 Vue 中的计算属性 computed 和 methods ?

    需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...

  8. 深入理解 vue 中 scoped 样式作用域的规则

    哈喽!大家好!我是木瓜太香,今天我们来聊一个 vue 的样式作用域的问题,通常我们开发项目的时候是要在 style 上加上 scoped 来起到规定组件作用域的效果的,所以了解他们的规则也是很有必要的 ...

  9. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

随机推荐

  1. MySQL集群（一）之主从复制

    前面学完了JDBC,接下来带大家感受一下MySQL集群!其实什么是MySQL集群?简单的说就是一群机器(服务器)的集合,它们连在一起来工作. 其实各种数据库都有自己的集群,常常的多: 我们要学习的就是 ...

  2. Selenium+Python自动化测试实战（2）元素定位

    1.Selenium2 的原理 第一篇分享简单介绍了基于Python开发的Selenium2的环境配置,这篇主要讲一下基本用法.首先讲一下Selenium2的基本原理.基本上知道了这个东西是怎么回事, ...

  3. Mysql免安装版配置【图文版和文字版】

    图文版 配置环境变量 新建一个my.ini文件,添加下面内容 [mysqld] basedir=C:\\software\Mysql\mysql-5.7.14-winx64 datadir=C:\\s ...

  4. Struts2开山篇【引入Struts、自定义MyStruts框架】

    前言 这是Strtus的开山篇,主要是引入struts框架-为什么要引入struts,引入struts的好处是什么-. 为什么要引入struts? 首先,在讲解struts之前,我们来看看我们以前写的 ...

  5. SpringMVC的数据格式化-注解驱动的属性格式化

    一.什么是注解驱动的属性格式化? --在bean的属性中设置,SpringMVC处理 方法参数绑定数据.模型数据输出时自动通过注解应用格式化的功能. 二.注解类型 1.DateTimeFormat @ ...

  6. Jmeter运行结果分析

    1.聚合报告 以上就是我们所关心的结果 Label:页面或请求名称 Samples:运行的线程数(也可理解为请求数) Average:平均响应时间 Median:响应时间的中值 90% Line:90 ...

  7. java类成员的访问权限

    private:这是安全级别最高的访问权限,尽在该类中可以访问到: 默认访问权限:又称包访问权限,顾名思义,仅在该包内可以访问: protected:在包访问权限的基础上,该类的子类也可以访问到: p ...

  8. datepickerpopup时间限制选取

    使用popup组件的过程中遇到时间选取的问题 官方文档大致说使用date和mode 可以解决,奈何老夫是看不懂,写的时候参考的有 官方文档.echo2016的博文.liumang361的博文 先看图 ...

  9. 用wrk测试nginx/ndoejs/golang

    sudo taskset -c ./wrk -c1 -t1 -d30 http://localhost/hello wrk+nginx(helloworld module) sudo taskset ...

  10. oracle pl/sql 函数

    函数用于返回特定的数据,当建立函数时,在函数头部必须包含return子句.而在函数体内必须包含return语句返回的数据.我们可以使用create function来建立函数. 1).接下来通过一个案 ...