作用域插槽
2022/7/13 23:22:47
本文主要是介绍作用域插槽,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
渲染作用域 : 该插槽可以访问与模板其余部分相同的实例 property (即相同的“作用域”)。作用域: 本质用来访问数据
有时让插槽内容能够访问子组件中才有的数据是很有用的。当一个组件被用来渲染一个项目数组时,这是一个常见的情况,我们希望能够自定义每个项目的渲染方式。
1 <div id="app"> 2 <p>{{msg}}</p> 3 <!-- 如果在插槽中可以直接访问父组件中的data, 但是如果在子组件的模板template 中访问父组件中的data, 需要 组件通信 --> 4 <child v-bind:msg="msg"> 5 <!-- obj是自定义的对应的是下面的第一个arr 接受的是一个对象 都是自定义的名字 用来接收默认插槽提供的数据 --> 6 <template v-slot='obj'> // obj 就是对应子组件data数据里面的arr整个数组 7 <p v-for="item in obj.arr">{{obj}} --- {{item}}</p> 8 </template> 9 10 <!-- 接收具名插槽提供的数据 --> 11 <!-- <template v-slot:nav="obj2"> 12 <strong>{{obj2.msg}}</strong> 13 </template> --> 14 15 <!-- 插槽解构 --> 16 <template v-slot:nav="{a, b}"> 17 <strong>{{a}} ==== {{b}}</strong> 18 </template> 19 </child> 20 </div>
1 <script src="./js/vue.global.min.js"></script> 2 <script> 3 const app = Vue.createApp({ 4 data() { 5 return { 6 msg: '定义数据' 7 } 8 } 9 }) 10 11 const Child = { 12 data() { 13 return { 14 arr: [1, 23, 4, 5] 15 } 16 }, 17 // 插槽 prop 18 // 第一个arr是自定义的属性名 第二个arr是child data数据里面的arr 19 template: ` 20 <div> 21 22 <slot :arr='arr' title='静态数据'></slot> 23 <strong>{{msg}}</strong> 24 <hr><hr> 25 <slot name='nav' msg='具名插槽提供数据' a='100' b='300'>具名插槽</slot> 26 </div> 27 `, 28 props: ['msg'] 29 } 30 31 app.component('Child', Child) 32 app.mount('#app') 33 </script>
这篇关于作用域插槽的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?
- 2024-05-30java excel上传--poi
- 2024-05-30安装笔记本应用商店的pycharm,再安排pandas等模块,说是没有打包工具?
- 2024-05-29java11新特性
- 2024-05-29哪些无用敏捷指标正在破坏敏捷转型?
- 2024-05-29鸿蒙原生应用再新丁!新华社 入局鸿蒙
- 2024-05-29设计模式 之 迭代器模式(Iterator)