Vue 作用域插槽
2017-12-18 17:05
537 查看
使用场景:复用子组件的slot,又可以使slot的内容不一样。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Vue</title> </head> <body> <div id="app"> <my-component :books="books"> <template slot="book" slot-scope="props"> <li>{{props.bookName}}</li> </template> </my-component> </div> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script> <script type="text/javascript"> Vue.component('my-component', { template: ` <ul> <slot name="book" v-for="book in books" :book-name="book.name"><slot> </ul> `, props: { books: { type: Array, default: function() { return []; } } } }); new Vue({ el: "#app", data: { books: [{ name: 'css' }, { name: 'js' }, { name: 'html' }, ] } }) </script> </body> </html>
相关文章推荐
- Vue作用域插槽slot-scope实例代码
- Vue 作用域插槽 列表组件 示例
- 关于vue.js中作用域插槽的实例
- vue中的作用域插槽--理解(slot-scope)
- Vue 组件3 作用域插槽
- vue作用域插槽例子
- vue基于webpack 模板的目录结构以及目录作用的解析
- vue.js中created方法作用
- vue组件中$emit()的作用
- vue文件中style的scoped属性的作用
- vue.js中created方法作用
- vue2.1.x 新增作用域插槽
- vuex namespaced的作用
- vue中的ref作用,可以实现DOM的联动操作
- vue 自定义样式 深度选择器 作用域CSS
- vue的匿名插槽
- vue.js中created方法作用
- DELL 1330复活计内存条的插槽出问题就会使本本出现:开机后只有电源灯和那个A灯(网上查的是充电、放电的指示灯,我想这个是不是跟电源灯作用一样,只要插电源就会亮),在亮47秒后,断电、关机。
- vue-router、vue-loader、vue-cli,v-source的作用
- vue-router各个属性的作用及用法