理解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. vim基础详解

    目录: 什么是vim Vim能做什么 如何学习vim 如何用vim打开一个文件 Vim的三种模式 插入模式 命令模式 扩展命令模式 光标移动 在命令模式下 删除,复制,粘贴 扩展命令模式 可视化模式 ...

  2. Linux环境下MySQL数据库用SQL语句插入中文显示 “问号或者乱码 ” 问题解决！

    问题: 在普通用户权限下执行 mysql -u root -p进入mysql数据库,中间步骤省略,插入数据:insert into 库名(属性)values('汉字'); 会出现如下提示:  Quer ...

  3. 使用Gateway-Worker实现多人分组实时聊天 结合第三方tp

    一.基础知识1.Workerman是一款纯PHP开发的开源高性能的PHP socket 服务器框架.被广泛的用于手机app.移动通讯等领域的开发. 支持TCP长连接,支持Websocket.HTTP等 ...

  4. 为什么自学java的人99%都学不会？

    在学习java这条路上,有一类自学的学员,总让我感慨良多.这类学员,往往每天表现非常勤奋的学习,但学会的人却很少.他们极期勤奋,那么努力的学,也很认真,为什么就是学不会java呢? 通过小橙子我的大量 ...

  5. 使用jsonp来实现跨域请求

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. 【京东账户】——Mysql/PHP/Ajax爬坑之添加购物车

    一.引言 做京东账户项目中的购物车模块,功能之一就是添加购物车.要用到的是Apach环境,Mysql.PHP以及Ajax. 预计效果:用户点击->"加入购物车"  添加成功 ...

  7. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  8. 运行Chromium浏览器缺少google api密钥无法登录谷歌账号的解决办法

    管理员身份运行CMD,然后依次输入以下三行内容: setx GOOGLE_API_KEY "AIzaSyAUoSnO_8k-3D4-fOp-CFopA_NQAkoVCLw"setx ...

  9. WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系

    WPF布局控件与子控件的HorizontalAlignment/VerticalAlignment属性之间的关系: 1.Canvas/WrapPanel控件: 其子控件的HorizontalAlign ...

  10. Print Article hdu 3507 一道斜率优化DP 表示是基础题，但对我来说很难

    Print Article Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)To ...