scope方法如何在vue中使用-创新互联
本篇文章为大家展示了scope方法如何在vue中使用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联为您提适合企业的网站设计 让您的网站在搜索引擎具有高度排名，让您的网站具备超强的网络竞争力！结合企业自身，进行网站设计及把握，最后结合企业文化和具体宗旨等，才能创作出一份性化解决方案。从网站策划到成都网站建设、
网站制作， 我们的网页设计师为您提供的解决方案。
我们都知道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中使用，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网页名称：scope方法如何在vue中使用-创新互联
浏览路径：
http://kswjz.com/article/ihdhj.html
扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
