原文:Vue躬行記(5)——組件通信

組件之間除了保持獨立之外,還需要相互通信,本章將介紹幾種通信的方式。 一 直接訪問 Vue提供了三個實例屬性,可直接訪問父組件 子組件和根實例,如下所列。 parent:父組件。 root:根實例,如果沒有父實例,那么讀取的將是自身。 children:直接子組件,無法獲取隔代的子組件,並且不保證組件的順序,也非響應式。 下面用一個示例來演示它們的用法,首先創建兩個父子關系的組件parent和c ...

2019-11-04 09:36 0 337 推薦指數:

查看詳情

Vue躬行(4)——組件

  組件是可復用的Vue實例,擁有屬於自己的數據、模板、腳本和樣式,可避免繁重的重復性開發。由於組件都是獨立的,因此其內部代碼不會影響其它組件,但可以包含其它組件,並且相互之間還能通信。 一、注冊   在使用組件之前,需要先將其注冊,Vue提供了兩種注冊方式:全局注冊和局部注冊。 1)全局 ...

Mon Oct 28 16:27:00 CST 2019 0 310
React躬行(3)——組件

  組件(Component)由若干個React元素組成,包含屬性、狀態和生命周期等部分,滿足獨立、可復用、高內聚和低耦合等設計原則,每個React應用程序都是由一個個的組件搭建而成,即組成React應用程序的最小單元正是組件。 一、構建   目前推崇的構建組件的方式總共有兩種:類和函數,而用 ...

Tue Jun 18 17:43:00 CST 2019 0 433
Vue躬行(2)——指令

  Vue不僅內置了各類指令,包括條件渲染、事件處理等,還能注冊自定義指令。 一、條件渲染   條件渲染的指令包括v-if、v-else、v-else-if和v-show。 1)v-if   該指令的功能和條件語句中的if類似,可根據表達式的計算結果,判斷是否渲染分支中的元素和它所包含的子 ...

Mon Oct 14 17:55:00 CST 2019 0 410
Vue躬行(9)——Vuex

  Vuex是一個專為Vue.js設計的狀態管理庫,適用於多組件共享狀態的場景。Vuex能集中式的存儲和維護所有組件的狀態,並提供相關規則保證狀態的獨立性、正確性和可預測性,這不僅讓調試變得可追蹤,還讓代碼變得更結構化且易維護。本文所使用的Vuex,其版本是3.1.1。 一、基本用法 ...

Wed Nov 20 17:30:00 CST 2019 0 322
Vue躬行(8)——Vue Router

  雖然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router庫),以插件的形式支持。它與Vue.js深度集成,可快速的創建單頁應用(Single Page Application,SPA)。 一、基本用法   首先需要引入vuevue-router兩個庫 ...

Mon Nov 18 17:34:00 CST 2019 0 398
Vue躬行(3)——樣式和表單

  Vue對DOM元素的class和style兩個特性做了專門的增強,即對CSS類和內聯樣式做了一層封裝,通過v-bind指令來處理它們,而接收的表達式既可以是簡單的字符串、對象或數組,也可以是復雜的計算屬性。不僅如此,Vue還為表單設計了一些語法糖,讓表單處理變得尤為簡單。 一、CSS類 ...

Mon Oct 21 16:33:00 CST 2019 0 410
Vue躬行(6)——內容分發

  Vue提供了一種內容分發技術,可將父組件中的內容傳遞給子組件的模板,實現方式參照了Web組件規范草案。 一、插槽   Vue內置了一個<slot>元素,能作為插槽(slot)存在,而插槽內可包含文本、HTML片段、組件等。以下面的btn組件為例,其模板中包含一個< ...

Mon Nov 11 17:51:00 CST 2019 0 322
Vue躬行(1)——數據綁定

創建一個Vue實例,而Vue實例相當於MVVM模式中的ViewModel。注意,所有的Vue組件(后面篇 ...

Wed Oct 09 16:18:00 CST 2019 0 524
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM