vue组件封装及父子组件传值,事件处理
vue开发中,把有统一功能的部分提取出来,作为一个独立的组件,在需要使用的时候引入,可以有效减少代码冗余.
难点在于如果封装,使用,如何传参,派发事件等,我会采取倒叙的方式进行说明.
(本文总结于Vue2实战解密一书)
代码如下:
封装组件BookList.vue
<template>
<div class="book-list">
<div class="header">
<div class="heading">{{heading}}</div>
<div class="more">更多...</div>
</div>
<div class="book-items">
<div class="book" v-for="book in books">
<div class="cover">
<img :src="book.imgUrl" />
</div>
<div>{{book.title}}</div>
<div>{{book.authors | join}}</div>
</div>
</div>
</div>
</template>
<script>
export default{
props:['heading','books'],
filters:{
join(args){
return args.join(',');
}
}
}
</script>
要向组件输入数据就不能用data来作为数据容器了,因为data是一个内部对象,此时要换成props
我们可以这样理解:
data的作用域是仅仅适用于内部,而对于外部是不可见的,props是内部外部都可见,是一个公共的组件成员变量.
Home.vue 组件代码如下:
<template>
<div class="section">
<book-list :books="books1" heading="书列表1"></book-list>
</div>
<div class="section">
<book-list :books="books2" heading="书列表2"></book-list>
</div>
</template>
<script>
import BookList from './components/BookList.vue'
export default{
data(){
return{
books1:[],
books2:[],
}
},
components:{ //注册自定义组件
BookList
}
</script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥