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>