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

hikui 發(fā)布于2019-08-23 14:39 / 3555人閱讀

摘要：開發(fā)中把有統(tǒng)一功能的部分提取出來作為一個獨立的組件在需要使用的時候引入可以有效減少代碼冗余難點在于如果封裝使用如何傳參派發(fā)事件等我會采取倒敘的方式進行說明本文總結(jié)于實戰(zhàn)解密一書代碼如下封裝組件更多要向組件輸入數(shù)據(jù)就不能用來作為數(shù)據(jù)容器

vue開發(fā)中,把有統(tǒng)一功能的部分提取出來,作為一個獨立的組件,在需要使用的時候引入,可以有效減少代碼冗余.
難點在于如果封裝,使用,如何傳參,派發(fā)事件等,我會采取倒敘的方式進行說明.
(本文總結(jié)于Vue2實戰(zhàn)解密一書)
代碼如下:
封裝組件BookList.vue

要向組件輸入數(shù)據(jù)就不能用data來作為數(shù)據(jù)容器了,因為data是一個內(nèi)部對象,此時要換成props
我們可以這樣理解:
    data的作用域是僅僅適用于內(nèi)部,而對于外部是不可見的,props是內(nèi)部外部都可見,是一個公共的組件成員變量.

Home.vue 組件代碼如下:

GPU云服務(wù)器云服務(wù)器 vue父子組件通訊父子組件父子組件通信父子組件通訊

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100936.html

相關(guān)文章

Vue2從0到1(四)：Vue組件化及組件間傳值

摘要：前面講了環(huán)境的搭建用打包和的使用以及的使用下面講一下組件化及組件間傳值主要包括父子組件間傳值，兄弟組件間傳值，不相關(guān)組件間傳值。組件化及組件間傳值組件化組件是最強大的功能之一。前面講了環(huán)境的搭建用webpack打包vue和Vue-router的使用以及vuex的使用下面講一下Vue組件化及組件間傳值：主要包括父子組件間傳值，兄弟組件間傳值，不相關(guān)組件間傳值。 10.Vue組件...

geekzhou 2019-08-21 17:04 評論0 收藏0
vue -- 非父子組件傳值，事件總線（eventbus）的使用方式

摘要：我的個人博客地址資源地址非父子組件傳值，事件總線的使用方式我的博客地址如果您對我的博客內(nèi)容有疑惑或質(zhì)疑的地方，請在下方評論區(qū)留言，或郵件給我，共同學習進步。歡迎訪問我的個人博客：http://www.xiaolongwu.cn 前言先說一下什么是事件總線，其實就是訂閱發(fā)布者模式；比如有一個bus對象，這個對象上有兩個方法，一個是on（監(jiān)聽，也就是訂閱），一個是emit（觸發(fā)，也就...

zone 2019-08-23 14:37 評論0 收藏0
Vue 父子傳值與子父傳值

摘要：子實例可以用訪問父實例，子實例被推入父實例的數(shù)組中。節(jié)制地使用和它們的主要目的是作為訪問組件的應(yīng)急方法。更推薦用和實現(xiàn)父子組件通信我是父組件中的數(shù)據(jù)我是我是號組件我是利用props父子傳值父組件，可以在引用子組件的時候，通過屬性綁定（v-bind:）的形式, 把需要傳遞給子組件的數(shù)據(jù)，以屬性綁定的形式，傳遞到子組件內(nèi)部，供子組件使用創(chuàng)建 Vue 實例，得到 Vie...

aisuhua 2019-08-23 17:14 評論0 收藏0
vue組件間通信六種方式（完整版）

摘要：本文總結(jié)了組件間通信的幾種方式，如和，以通俗易懂的實例講述這其中的差別及使用場景，希望對小伙伴有些許幫助。狀態(tài)改變提交操作方法。前言組件是 vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。一般來說，組件可以有以下幾種關(guān)系：showImg(https://segmentfault.com/img/remote/146000001...

frontoldman 2019-08-26 13:48 評論0 收藏0
vue組件間通信六種方式（完整版）

摘要：本文總結(jié)了組件間通信的幾種方式，如和，以通俗易懂的實例講述這其中的差別及使用場景，希望對小伙伴有些許幫助。狀態(tài)改變提交操作方法。前言組件是 vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。一般來說，組件可以有以下幾種關(guān)系： showImg(https://user-gold-cdn.xitu.io/2019/5/17/16ac35bf...

DDreach 2019-05-21 16:37 評論0 收藏0