理解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. linux crontab设置定期执行脚本

    Linux下crontab命令的用法 任务调度的crond常驻命令crond 是linux用来定期执行程序的命令.当安装完成操作系统之后,默认便会启动此任务调度命令.crond命令每分锺会定期检查是否 ...

  2. 自定义Django的中间件

    分析Django的生命周期,我们知道所有的http请求都要经过Django的中间件. 假如现在有一个需求,所有到达服务端的url请求都在系统中记录一条日志,该怎么做呢? Django的中间件的简介 D ...

  3. PostgreSQL使用MyBatis,insert时返回主键

    MyBatis中普通的insert语句是这样的: <insert id="insert" parameterType="com.xxx.xxx.xxDo" ...

  4. JavaScript简易计算器

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标 ...

  5. Python NLP入门教程

    本文简要介绍Python自然语言处理(NLP),使用Python的NLTK库.NLTK是Python的自然语言处理工具包,在NLP领域中,最常使用的一个Python库. 什么是NLP? 简单来说,自然 ...

  6. JAVA设计模式总结之23种设计模式

    上一篇总结了设计模式的六大原则<JAVA设计模式总结之六大设计原则>,这一篇,正式进入到介绍23种设计模式的归纳总结. 一.什么是设计模式                         ...

  7. sleep,yield,wait,notify,notifyAll

    1.wait,notify,notifyAll是Object的方法.他们必须在同步块中使用,并且当前线程必须已经获取了锁.wait方法,用来释放同步块对象上的锁,并且等待其他的线程唤醒(notify) ...

  8. vue实例讲解之vue-router的使用

    实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...

  9. System.Object简介

    Object中的公共方法解释: 公共方法: Equals: public class Object { public virtual Boolean Equals(Object obj) { //如果 ...

  10. sql server 2000的安装

    一.安装sql 二.启动sql 三.查看sql版本 RTM版本,需要打补丁 四.安装SP4