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" rel="external nofollow" />
 <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使用详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言！

赞 (0)

相关推荐

  • 浅谈关于.vue文件中style的scoped属性

    浅谈关于.vue文件中style的scoped属性

    本文介绍了.vue文件中style的scoped属性以及踩到的坑,具体如下: scoped可以实现style只作用于当前的.vue文件 <template> <div class="user"></div> </template> <script> </script> <style lang='less' scoped> .user { color:#333; } </style> 上面的文

  • vue中的scope使用详解

    我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值,获取到的值是一个对象. 注意:scope="它可以取任意字符串"; 上面已经说了 scope获取到的是一个对象,是什么意思呢?我们先来看一个简单的demo就可以明白了~ 如下模板页面: <!DOCTYPE html> <html> <head> <title>

  • 关于vue中 $emit的用法详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&

  • Vue 中mixin 的用法详解

    说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

  • Vue中的vue-resource示例详解

    Vue中的vue-resource示例详解

    vue-resource特点 vue-resource插件具有以下特点: 1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多. 2. 支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持. 3. 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含义为"先知",Pro

  • Vue 中axios配置实例详解

    1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons

  • Vue中$refs的用法详解

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

  • vue中$emit的用法详解

    vue中$emit的用法详解

    目录 vue2.x vue3.x 子组件 父组件 vue2.x 1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit,让父组件监听到自定义事件 . vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:

  • Vue中provide、inject详解以及使用教程

    目录 Vue中 常见的组件通信方式可分为三类 1. provide / inject 简介 2. provide / inject 使用方法 3. 总结 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue 2.x 官方文档 provide / inject 说明 Vue中 常见

  • Vue中watch使用方法详解

    目录 前言 watch immediate和handler deep 拓展 前言 说到 vue 中的 watch 方法,大家可能首先想到,它是用来监听数据的变化,一旦数据发生变化可以执行一些其他的操作.但是 watch 的操作可不止如此,本章就带大家一起深剖细析 vue 中的 watch 方法. watch 因为 vue 是双向数据绑定,所以当页面数据发生变化时,我们通过 watch 方法就可以拿到数据变化前和变化后的值,从而做一系列操作,下面我们通过一个简单的例子来解释. 先看下面这段代码 <

  • Vue中props的使用详解

    props属性是父子组件之间的通信桥梁.何为父子组件?从子组件的观点来看,他的上一级实例或组件即为他的父组件.我们知道,处于安全考虑,组件模板里我们无法直接使用父组件的data数据,使用props这个属性可以将父组件的数据传给子组件. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>props的测试</titl

随机推荐