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

- 日理万妓 2022-03-27 07:12 281阅读 0赞

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>

来源：[https://segmentfault.com/a/1190000017859667][https_segmentfault.com_a_1190000017859667]

[https_segmentfault.com_a_1190000017859667]: https://segmentfault.com/a/1190000017859667