vue组件封装及父子组件传值,事件处理

vue开发中,把有统一功能的部分提取出来,作为一个独立的组件,在需要使用的时候引入,可以有效减少代码冗余.
难点在于如果封装,使用,如何传参,派发事件等,我会采取倒叙的方式进行说明.
(本文总结于Vue2实战解密一书)
代码如下:
封装组件BookList.vue


要向组件输入数据就不能用data来作为数据容器了,因为data是一个内部对象,此时要换成props
我们可以这样理解:
    data的作用域是仅仅适用于内部,而对于外部是不可见的,props是内部外部都可见,是一个公共的组件成员变量.

Home.vue 组件代码如下:


你可能感兴趣的:(vue组件封装及父子组件传值,事件处理)