宜宾网站建设公司

scope方法如何在vue中使用

本篇文章为大家展示了scope方法如何在vue中使用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联从2013年开始，先为福山等服务建站，福山等地企业，进行企业商务咨询服务。为福山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

我们都知道vue slot插槽可以传递任何属性或html元素，但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值，获取到的值是一个对象。

注意：scope="它可以取任意字符串";

上面已经说了 scope获取到的是一个对象，是什么意思呢？我们先来看一个简单的demo就可以明白了~

如下模板页面：



 
 Vue-scope的理解
 
 
 
 
 
 
  
  
   
   
姓名:{{scope.row.name}}

   
年龄: {{scope.row.age}}

   
性别: {{scope.row.sex}}

   
索引：{{scope.$index}}

   
       
    
                
      new Vue({   el: '#app',   data() {    return {    data: [     {     name: 'kongzhi1',     age: '29',     sex: 'man'     },      {     name: 'kongzhi2',     age: '30',     sex: 'woman'     }    ]    }   },   methods: {       }   });    

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组件模板页面是如下：

    
 
 
 

遍历data属性值，然后使用slot来接收 tb-list组件中的任何内容；其内容如下：


 
 
姓名:{{scope.row.name}}

 
年龄: {{scope.row.age}}

 
性别: {{scope.row.sex}}

 
索引：{{scope.$index}}

 

最后在模板上使用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里面的一个个对象。

上述内容就是scope方法如何在vue中使用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。


文章标题：scope方法如何在vue中使用
文章位置：http://ybzwz.com/article/gjjceh.html

其他资讯