vue元件封裝及父子元件傳值,事件處理

orange發表於2019-02-16
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>

相關文章