我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"
来获取插槽上的属性值,获取到的值是一个对象。
注意:scope="它可以取任意字符串";
上面已经说了 scope获取到的是一个对象,是什么意思呢?我们先来看一个简单的demo就可以明白了~
如下模板页面:
<!DOCTYPE html> <html> <head> <title>Vue-scope的理解</title> <script src="/UploadFiles/2021-04-02/vue.js">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使用详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言!
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年10月14日
2024年10月14日
- 群星《歌手2024 第4期》[FLAC/分轨][563.76MB]
- RiffKitten-ChaosParade(2024)[24-44,1]FLAC
- RuneKlakegg-Nattevandrer(2024)[24-96]\FLAC
- 赖冰霞.2006-金嗓典藏辑2IN1(南方金点系列)2CD【南方】【WAV+CUE】
- 群星.1988-国语金曲尽精英VOL.2【瑞成】【WAV+CUE】
- 张宇.1999-雨一直下【EMI百代】【WAV+CUE】
- 袁娅维.2021-月亮失眠了(DELUXE)【华纳】【FLAC分轨】
- AlanBroadbent-JazzFunk(2024)[24-44,1]
- 梅艳芳《绝代芳华》开盘母带[低速原抓WAV+CUE]
- ABC唱片-《外国精逊母带直刻神奇黑胶[APE+CUE].
- 群星《天赐的声音第五季 第6期》[320K/MP3][101.43MB]
- 群星《天赐的声音第五季 第6期》[FLAC/分轨][526.16MB]
- 群星《说唱梦工厂 第2期》[320K/MP3][96.37MB]
- 杨宗宪.1994-留你留袂着【有容唱片】【WAV+CUE】
- 李翊君.2005-勇敢的爱【创意唱片】【WAV+CUE】