Vue 作用域插槽 列表组件 示例
2018-03-30 10:35
519 查看
看了官网的Vue作用域插槽示例，不是特别明白，又在网上搜索了下其他的示例参考了下，然后大概清楚了点，就写了个小示例：
<!DOCTYPE html><html><head> <title>Vue 作用域插槽 列表组件 示例</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body> <div id="app"> <child :favorite="items"> <li slot="item" slot-scope="item">{{item.text}}-{{item.message}}</li> </child> </div>
<script>
Vue.component('child',{ props:['favorite'], template:` <ul> <slot name="item" v-for="cute in favorite" :text="cute.text" :message="cute.msg"></slot> </ul> ` })
var app = new Vue({ el:'#app', data:{ items:[ {text:'ss',msg:'睡睡'}, {text:'ww',msg:'玩玩'}, {text:'cici',msg:'吃吃'} ] } })
</script></body></html>
<!DOCTYPE html><html><head> <title>Vue 作用域插槽 列表组件 示例</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body> <div id="app"> <child :favorite="items"> <li slot="item" slot-scope="item">{{item.text}}-{{item.message}}</li> </child> </div>
<script>
Vue.component('child',{ props:['favorite'], template:` <ul> <slot name="item" v-for="cute in favorite" :text="cute.text" :message="cute.msg"></slot> </ul> ` })
var app = new Vue({ el:'#app', data:{ items:[ {text:'ss',msg:'睡睡'}, {text:'ww',msg:'玩玩'}, {text:'cici',msg:'吃吃'} ] } })
</script></body></html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue组件（父子组件传值、非props特性、作用域插槽、动态组件、v-once）
- Vue 组件3 作用域插槽
- Vue.js组件示例
- Vue 组件和插槽的理解与使用
- 精品4K项目列表vue分页组件
- vue组件化开发初体验-示例vue-loader-example学习记录
- Vue结合原生js实现自定义组件自动生成示例
- vue组件之间的通信示例
- Vue中组件之间数据的传递的示例代码
- vue中的自定义分页插件组件的示例
- vue 项目中使用Loading组件的示例代码
- Vue------第五天（关于组件的一些基础了解，包括组件的注册、Prop、自定义事件、使用插槽分发内容等）
- Vue2.0组件间数据传递示例
- Vue封装一个简单轻量的上传文件组件的示例
- 一个Vue视频媒体多段裁剪组件的实现示例
- vue 1.x 交互实现仿百度下拉列表示例
- Vue.js使用-组件示例（实现数据的CRUD）
- vue组件name的作用小结
- vue弹窗组件的实现示例代码
- Vue.use自定义全局组件示例