vue元件之間的通訊

2021-08-20 16:44:37 字數 851 閱讀 9914

---區域性元件:區域性元件必須手動掛載,不然無法生效。

---全劇元件:全域性元件不需要手動掛載,但不常用,盡量不要在全域性上掛載變數或者元件(影響瀏覽器效能)

---配合模板實現元件之間的巢狀。

元件是vue.js最強大的功能之一,核心目標是擴充套件htnl元素,封裝可重用**。元件可按照template,style,script的拆分方式,放到對應的.vue檔案中。

vue元件之間的通訊:

一是dom事件繫結,可以通過v-on或事件語法糖@來為dom元素繫結事件

二是自定義事件,為元件通訊設定,提供@on(監聽子元件),@off,@once,@emit(觸發事件,把事件沿著父鏈冒泡)

v

ue元件資料三種傳遞方式:

p

rops 是元件資料的乙個字段,從父元件傳遞給子元件。子元件中顯示使用props選項來獲取父元件是資料。預設是單項繫結(.once),可以使用.sync改為雙向繫結。(不提倡使用)

元件通訊

作用域是層級的,故可以在作用域鏈上傳遞事件,每個vue例項都是乙個事件觸發器,有函式:$on()  $emit()

s

olt不同的使用場景元件一部分內容需要不同的內容顯示,而這個solt就好比開發元件時定義的乙個引數(通過name值來區分),如果不傳入就當預設值使用,傳入新的值,那麼元件呼叫時就會替換你定義的solt的預設值。

vue元件之間通訊

個人blog,歡迎關注加收藏 元件之間通訊的幾種方式 1.父向子傳資料 props 2.子向父傳資料 emit 3.兄弟元件傳資料 a.事件匯流排 bus 在父元件的data中bus new vue 建立 事件匯流排 b.傳遞資料 this.roo t.bu s.root.bus.root.b us...

Vue元件之間通訊

vue元件傳值有以下幾種情況 父元件向子元件傳值 子元件向父元件傳值 兄弟元件之間傳值等 一 父元件向子元件傳值 傳值方式 props 動態傳遞值 子元件son 靜態傳值 父元件 子元件 son 1 prop的大小寫 html中的attribute名對大小寫不敏感,所以prop中的駝峰值需要等價於短...

vue元件之間的通訊

作為乙個vue初學者不得不了解的就是元件間的資料通訊 暫且不談vuex 通訊方式根據元件之間的關係有不同之處。元件關係有下面三種 父 子 子 父 非父子 父 子 父向子傳遞資料通過props 父元件 子元件 子 父 子元件向父元件傳遞分為兩種型別。1 子元件改變父元件傳遞的props 你會發現通過p...