VUE組件化開發(fā)的精髓

e10101 發(fā)布于2019-05-23 11:05 / 2345人閱讀

摘要：開篇的簡單介紹和演示的開發(fā)精髓組件組件的三個組件之間的通信方式實例講解銖寶益幫助中心前端組件開篇的簡單介紹和演示發(fā)布于年，是一個漸進式的框架，同時也是一個輕量級的框架，它只關心數據，從而讓開發(fā)者不用過多的關注的改變和操作，的作者為尤雨溪，

開篇：vue.js的簡單介紹和演示

vue的開發(fā)精髓-組件

vue組件的三個API：prop、event、slot

組件之間的通信方式

實例講解：銖寶益幫助中心前端組件

開篇：vue.js的簡單介紹和演示

vue發(fā)布于2013年，是一個漸進式的框架，同時也是一個輕量級的框架，它只關心數據，從而讓開發(fā)者不用過多的關注DOM的改變和操作DOM，vue的作者為Evan You（尤雨溪），任職于Google Creative Lab

DOM：document object model（文檔對象模型）也就是操作html或xml的通用編程接口，這里不過度描述

雙向綁定代碼演示

// html

    "app">
        type="text" v-model="note">
        {{ note }}
    


// js
var app = new Vue({
    el: "#app",
    data: {
        note: ""
    }
})

對比其它web前端框架，vue更容易上手，代碼和API更為簡潔和直觀，且速度更快！

vue的開發(fā)精髓-組件

vue最精髓的，正是它的組件與組件化,寫一個 Vue 工程，其實就是在寫一個個的組件。

vue組件的分類（三大類）

由 ==vue-router產生的每個頁面==，它本質上也是一個組件（.vue），主要承載當前頁面的 HTML 結構，會包含數據獲取、數據整理、數據可視化等常規(guī)業(yè)務。整個文件相對較大，因為它作為路由的渲染，不會被復用，因此也不會對外提供接口；在項目開發(fā)中，我們寫的大部分代碼都是這類的組件（頁面），協(xié)同開發(fā)時，每人維護自己的頁面，很少有交集。這類組件相對是最好寫的，因為主要是還原設計稿，完成需求，不需要太多模塊和架構設計上的考慮；

不包含業(yè)務，獨立、具體功能的==基礎組件==，比如日期選擇器、模態(tài)框等。這類組件作為項目的基礎控件，會被大量使用，因此組件的 API 進行過高強度的抽象，可以通過不同配置實現不同的功能；

==業(yè)務組件==。它不像第二類獨立組件只包含某個功能，而是在業(yè)務中被多個頁面復用的，它與獨立組件的區(qū)別是，業(yè)務組件只在當前項目中會用到，不具有通用性，而且會包含一些業(yè)務，比如數據請求；而獨立組件不含業(yè)務，在任何項目中都可以使用，功能單一，比如一個具有自定義數據校驗功能的輸入框。

vue組件的三個API：prop、event、slot

一個組件的復雜與否，都是由三部分組成的，==prop（屬性）==，==event（事件）==，==slot（插槽）==，必須要先設計好這三部分，才能繼續(xù)開發(fā)組件，否則，代碼一旦發(fā)布，后面再修改API就很困難了，組件的維護都是以新增功能為主，而不是經常變更接口；

prop（屬性）

prop 定義了這個組件有哪些可配置的屬性，組件的核心功能也都是它來確定的。寫通用組件時，props 最好用對象的寫法，這樣可以針對每個屬性設置類型、默認值或自定義校驗屬性的值，這點在組件開發(fā)中很重要，然而很多人卻忽視，直接使用 props 的數組用法，這樣的組件往往是不嚴謹的。

例如：收銀端的打印彈框組件（部分代碼已簡略）

組件中定義了4個prop，分別是==show==（控制組件的顯示隱藏），==web_view_url==（打印URL），==web_view_reback_path==（關閉打印后的跳轉地址），==web_view_error==（是否打印加載失敗）

值得注意的是，組件里定義的prop都是單向數據流，只能通過父級組件對齊進行修改，組件本身不能修改props的值，只能修改定義在data里的數據，非要修改，也是通過后面介紹的自定義事件通知父級，由父級來修改；

solt（插槽）

先看下代碼

這里的節(jié)點就是指定的一個插槽的位置，這樣在組件內部就可以擴展內容了；


  "icon" type="checkmark">
  按鈕 1

這樣，父級內定義的內容，就會出現在組件對應的 slot 里，沒有寫名字的，就是默認的 slot；

event（事件）

還是先看代碼

在組件中可以通過$emit觸發(fā)自定義事件on-click，在父組件通過@on-click來監(jiān)聽

"handleClick">

組件之間的通信方式

Vue 的組件作用域都是孤立的，不允許在子組件的模板內直接引用父組件的數據。必須使用特定的方法才能實現組件之間的數據傳遞

1、父子組件之間的通信方式

父組件向子組件的通信方式可以通過props傳遞：如果需要從父組件獲取 username 的值，就需要

props:{
   username:{
        
   }
}

子組件向父組件傳遞數據則可以通過event傳遞：

 methods:{
    handelSwitch(index){
      this.actIndex=index;
      this.$emit("transferTabIndex",this.actIndex)
    }
  }

2、非父子組件之間的通信方式：eventBus

eventBus這種通信方式,針對的是非父子組件之間的通信,它的原理還是通過事件的觸發(fā)和監(jiān)聽；

但是因為是非父子組件的關系,他們需要有一個中間組件來連接；

我是使用的通過在根組件,也就是#app組件上定義了一個所有組件都可以訪問到的組件,具體使用方式如下；

使用eventBus傳遞數據,我們一共需要做3件事情

1.給app組件添加Bus屬性 (這樣所有組件都可以通過this.$root.Bus訪問到它,而且不需要引入任何文件)；

2.在組件1里,this.

GPU云服務器云服務器 vue組件開發(fā) vue組件 vue父子組件通訊 vue輪播組件

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/6898.html

vuejs組件通信精髓歸納

摘要：組件的通信和和內置的通信手段一般有兩種給元素或組件注冊引用信息訪問父子實例。有時候兩個組件之間需要進行通信，但是它們彼此不是父子組件的關系。詳情可參考參考組件之間種組件通信方式總結參考參考組件的分類常規(guī)頁面組件，由 vue-router 產生的每個頁面，它本質上也是一個組件（.vue），主要承載當前頁面的 HTML 結構，會包含數據獲取、數據整理、數據可視化等常規(guī)業(yè)務。功能性抽...

妤鋒シ 2019-08-23 15:23 評論0 收藏0
【Vue原理】Vue源碼閱讀總結大會 - 序

摘要：扎實基礎幸好自己之前花了大力氣去給自己打基礎，讓自己現在的基礎還算不錯。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】Vue源碼閱讀總結大會 - 序閱讀源碼是需...

Edison 2019-08-23 18:18 評論0 收藏0
vue模擬攜程官網的搭建

摘要：仿造攜程官網題外話剛開始學前端的時候有一天看到攜程官網就希望有一天能模擬搭出來自己拖拖拉拉的一直沒整但是但是麻麻我終于完成了曾經親愛的同事把傳送門刪掉了不感謝他了感謝葉師兄拯救了我攜程攜程源碼仿攜程源碼目錄結構基于進行開發(fā)配合強行在攜程復制仿造攜程官網題外話:剛開始學前端的時候,有一天看到攜程官網.就希望有一天能模擬搭出來.自己拖拖拉拉的一直沒整, 但是但是麻麻我終于完成了!!(曾...

MartinHan 2019-08-01 17:47 評論0 收藏0
深入理解js對象的引用

JavaScript 有七種內置類型，其中：基本類型 ? 空值(null) ? 未定義(undefined) ? 布爾值( boolean) ? 數字(number) ? 字符串(string) ? 符號(symbol，ES6 中新增) 引用類型 ? 對象(object) 對于基本類型，賦值（=）是值的拷貝，比較（===）的是實際的值，而對于引用類型（Array也是一種Object），賦值（=）...

hedge_hog 2019-08-22 16:57 評論0 收藏0
React專題：react，redux以及react-redux常見一些面試題

摘要：我們可以為元素添加屬性然后在回調函數中接受該元素在樹中的句柄，該值會作為回調函數的第一個參數返回。使用最常見的用法就是傳入一個對象。單向數據流，比較有序，有便于管理，它隨著視圖庫的開發(fā)而被概念化。面試中問框架，經常會問到一些原理性的東西，明明一直在用，也知道怎么用，但面試時卻答不上來，也是挺尷尬的，就干脆把react相關的問題查了下資料，再按自己的理解整理了下這些答案。 reac...

darcrand 2019-08-23 13:41 評論0 收藏0