Vue:作用域插槽的使用方法
2020-06-04 06:21
661 查看
基本语法:
代码案例:(解析在注释中)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/vue.js"></script> <title>Document</title> <style> .current { color: orange; } </style> </head> <body> <div id="app"> <fruit-list :fruits="fruits"> <template v-slot="slotProps"> <!--slotProps是固定的名字 不能改变 接受子组件传递过来的数据--> <!-- slot-scope已经废弃 不建议使用 新增v-slot --> <strong v-if="slotProps.info.id==2" class="current">{{slotProps.info.name}}</strong> <span v-else>{{slotProps.info.name}}</span> </template> </fruit-list> </div> <script> Vue.component('fruit-list', { props: ['fruits'], template: ` <ul> <li v-for="fruit in fruits" :key="fruit.id"> <!--通过插槽储存fruit--> <slot :info='fruit'>{{fruit}}</slot> <!-- :info其实就是 v-bind:info--> </li> </ul> ` }) var vm = new Vue({ el: '#app', data: { fruits: [{ id: 1, name: 'apple' }, { id: 2, name: 'orange' }, { id: 3, name: 'banana' }] } }) </script> </body> </html>
运行结果:
相关文章推荐
- 详解Vue 匿名、具名和作用域插槽的使用方法
- vue slot插槽的使用方法
- 详解Vue组件插槽的使用以及调用组件内的方法
- Vue中的slot使用插槽分发内容的方法
- Vue中插槽-----特殊特性slot、slot-scope与指令v-slot的使用方法
- 详解vue slot插槽的使用方法
- vue组件的注册和使用,以及插槽使用方法或场景
- PreCreateWindow的作用和使用方法
- header中Content-Disposition的作用与使用方法
- 在里使用的加载phtml在方法。替代xml的作用
- C++中Static作用和使用方法
- C++中Static作用和使用方法
- C++中Static作用和使用方法
- PreTranslateMessage作用和使用方法【转】
- C++中Static作用和使用方法
- Spring配置中transactionAttributes的使用方法和作用
- C#类方法中使用数组参数params关键字的作用
- PreTranslateMessage作用和使用方法
- java中this.的使用;什么是构造方法,及构造方法的作用
- 宏定义的作用及使用方法