理解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. SharePoint备份文件

    stp文件:SharePoint的.stp文件   在做一个和SharePoint有关的项目时,由于对SharePoint的unfamiliar,所以客户发了几个后缀为.stp的文件将我纳闷了半天,不 ...

  2. [10] 过滤器 Filter

    1.过滤器的基本概念和作用 在网站的页面访问时,我们往往需要做一些控制,如普通用户无法访问VIP用户的页面.如果在每一个需要访问控制的文件中都加上判断代码,那么代码将会很冗余,一旦需要统一修改时也极其 ...

  3. Hibernate第十篇【Hibernate查询详解、分页查询】

    前言 在Hibernate的第二篇中只是简单地说了Hibernate的几种查询方式-.到目前为止,我们都是使用一些简单的主键查询阿-使用HQL查询所有的数据-.本博文主要讲解Hibernate的查询操 ...

  4. 与 Hadoop 对比，如何看待 Spark 技术？

    主要是先看MapReduce模型有什么问题? 第一:需要写很多底层的代码不够高效,第二:所有的事情必须要转化成两个操作Map/Reduce,这本身就很奇怪,也不能解决所有的情况. 其实Spark出现就 ...

  5. Codeforce 854 A. Fraction

    A. Fraction time limit per test 1 second memory limit per test 512 megabytes input standard input ou ...

  6. java 线程一

    java基础学习总结--线程(一) 一.线程的基本概念 线程理解:线程是一个程序里面不同的执行路径 每一个分支都叫做一个线程,main()叫做主分支,也叫主线程. 程只是一个静态的概念,机器上的一个. ...

  7. “一切都是消息”--MSF（消息服务框架）入门简介

    “一切都是消息”--这是MSF(消息服务框架)的设计哲学. MSF的名字是 Message Service Framework 的简称,中文名称:消息服务框架,它是PDF.NET框架的一部分. 1,M ...

  8. #翻译#原文来自Database.System.Concepts(6th.Edition.2010)2.6Relational Operations，原文作者Abraham Silberschaz ， Henry F. Korth ， S. Sudarshan

    2.6关系操作 所有的过程关系查询语言都提供一组操作,这些操作可以应用于单个关系或一对关系.这些操作具有良好的和期望的属性,它们的结果总是一个单一的关系.这个属性允许一个以模块化的方式组合其中的几个操 ...

  9. Javascript写的一个可拖拽排序的列表

    自己常试写了一个可拖拽进行自定义排序的列表,可能写的不太好,欢迎提供意见. 我的思路是将列表中的所有项都放进一个包裹层,将该包裹层设为相对定位,每当点击一个项时,将该项脱离文档并克隆一份重新添加到文档 ...

  10. Happy 2006 poj2773

    Happy 2006 Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 9049   Accepted: 3031 Descri ...