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>