理解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. 内置open（）函数对外部文件的操作

    >>> file=open('c://333.csv','r') 一些基本打开关闭操作 >>> s=file.read() >>> print s ...

  2. 利用ADO让普通人用excel读取oracle数据库表的通用办法

    Ref:http://blog.csdn.net/iamlaosong/article/details/8465177 Excel通过ADO方式连接到Oracle并操作Oracle给那些编程能力不强的 ...

  3. JavaScript自动化构建工具入门----grunt、gulp、webpack

    蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动  自动化时代的程序员: 希望一切都可以自动完成  ...

  4. Android 之异步加载LoaderManager

    LoaderManager: Loader出现的背景: Activity是我们的前端页面展现,数据库是我们的数据持久化地址,那么正常的逻辑就是在展示页面的渲染页面的阶段进行数据库查询.拿到数据以后才展 ...

  5. PHP buffer的机制

    PHP的buffer是这样的: 输出的字符串 => PHP buffer => 等待输出 => web 服务器的缓冲区 => tcp 缓冲区 => 客户端.过程其实相当的 ...

  6. AngularJS–Animations(动画)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/   在AngularJS 1.3 中,给一些指令(eg:   ngRepeat,ngSw ...

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

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

  8. GCD XOR uvalive6657

    GCD XORGiven an integer N, nd how many pairs (A; B) are there such that: gcd(A; B) = A xor B where1 ...

  9. Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017)ABCD

    A. Arpa and a research in Mexican wave time limit per test 1 second memory limit per test 256 megaby ...

  10. c++ 11 移动语义、std::move 左值、右值、将亡值、纯右值、右值引用

    为什么要用移动语义 先看看下面的代码 // rvalue_reference.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #includ ...