vue中的scope使用详解

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

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

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

如下模板页面：

rush:js;">

cope="scope">

cope)">

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

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

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

索引：{{scope.$index}}

js 代码如下：

rush:js;"> Vue.component('tb-list',{ template: '#tb-list',props: { data: { type: Array,required: true } },data() { return { } },beforeMount() { },mounted() { },methods: { } });

上面代码我们注册了一个叫 tb-list 这么一个组件，然后给 tb-list 传递了一个data属性值；该值是一个数组，如下值：

rush:js;"> data: [ { name: 'kongzhi1',sex: 'man' },{ name: 'kongzhi2',sex: 'woman' } ]

tb-list组件模板页面是如下：

rush:js;">

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

rush:js;">

最后在模板上使用scope来接收slot中的属性；因此scope的值是如下一个对象：

rush:js;"> {"row":{"name":"kongzhi1","age":"29","sex":"man"},"$index":0}

因为遍历了二次，因此还有一个是如下对象；

rush:js;"> {"row":{"name":"kongzhi2","age":"30","sex":"woman"},"$index":1}

从上面返回的scope属性值我们可以看到，scope返回的值是slot标签上返回的所有属性值，并且是一个对象的形式保存起来，该slot有两个属性，一个是row，另一个是$index,因此返回 {"row": item,"$index": "index索引"}; 其中item就是data里面的一个个对象。

最后页面被渲染成如下页面；

nofollow" target="_blank" href="https://tugenhua0707.github.io/vue/scope/index.html">查看页面效果；

总结

以上所述是小编给大家介绍的vue中的scope使用详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言！