vue元件封裝及父子元件傳值,事件處理
阿新 • • 發佈:2019-01-12
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>