原文:Vue.js 源碼分析(十二) 基礎篇 組件詳解

組件是可復用的Vue實例,一個組件本質上是一個擁有預定義選項的一個Vue實例,組件和組件之間通過一些屬性進行聯系。 組件有兩種注冊方式,分別是全局注冊和局部注冊,前者通過Vue.component 注冊,后者是在創建Vue實例的時候在components屬性里指定,例如: 渲染DOM為: writer by:大沙漠 QQ: 其中Hello World是全局注冊的組件渲染出來的,而Hello Vue ...

2019-06-26 10:58 0 425 推薦指數:

查看詳情

Vue.js 源碼分析(十三) 基礎 組件 props屬性詳解

組件通過props屬性向子組件傳遞數據,定義組件的時候可以定義一個props屬性,值可以是一個字符串數組或一個對象。 例如: 這里我們給child這個組件定義了名為title的props,父組件通過title特性傳遞給子組件,渲染為: props除了數組,也可以是一個對象 ...

Thu Jun 27 17:35:00 CST 2019 0 897
Vue.js 源碼分析(十四) 基礎 組件 自定義事件詳解

我們在開發組件時有時需要和父組件溝通,此時可以用自定義事件來實現 組件的事件分為自定義事件和原生事件,前者用於子組件給父組件發送消息的,后者用於在組件的根元素上直接監聽一個原生事件,區別就是綁定原生事件需要加一個.native修飾符。 子組件里通過過this.$emit()將自定義事件以及需要 ...

Fri Jun 28 17:28:00 CST 2019 0 437
Vue.js 源碼分析(二十二) 指令 v-model指令詳解

Vue.js提供了v-model指令用於雙向數據綁定,比如在輸入框上使用時,輸入的內容會事實映射到綁定的數據上,綁定的數據又可以顯示在頁面里,數據顯示的過程是自動完成的。 v-model本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據,並對一些極端場景進行一些特殊處理 ...

Wed Jul 10 08:02:00 CST 2019 0 702
Vue.js 源碼分析(六) 基礎 計算屬性 computed 屬性詳解

模板內的表達式非常便利,但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護,比如: 這樣模板不再是簡單的聲明式邏輯,必須看一段時間才能意識到,對於這些復雜 ...

Tue Jun 18 20:18:00 CST 2019 0 491
Vue.js 源碼分析(三) 基礎 模板渲染 el、emplate、render屬性詳解

Vue有三個屬性和模板有關,官網上是這樣解釋的: el     ;提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標 template  ;一個字符串模板作為 Vue 實例的標識使用。模板將會 替換 掛載的元素。掛載元素的內容都將被忽略,除非模板的內容有分發插槽 ...

Thu Jun 13 18:08:00 CST 2019 0 1499
Vue.js 源碼分析(五) 基礎 方法 methods屬性詳解

methods中定義了Vue實例的方法,官網是這樣介紹的: 例如:: 顯示的樣式為: 當我們點擊按鈕后變為了: methods方法中的上下文為當前實例,也就是this為當前實例。 注:不應該使用箭頭函數來定義 method 函數 ...

Mon Jun 17 19:42:00 CST 2019 1 1245
Vue.js 源碼分析(八) 基礎 依賴注入 provide/inject組合詳解

先來看看官網的介紹: 簡單的說,當組件的引入層次過多,我們的子孫組件想要獲取祖先組件的資源,那么怎么辦呢,總不能一直取父級往上吧,而且這樣代碼結構容易混亂。這個就是這對選項要干的事情 provide和inject需要配合使用,它們的含義如下: provide ;一個對象 ...

Thu Jun 20 19:28:00 CST 2019 0 932
 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM