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}}
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://pwwzsj.com/article/gjjceh.html