vue元件傳值

2021-10-08 03:25:28 字數 679 閱讀 8705

vue元件傳值在日常開發中比較常見,所以今天就把這個拉出來寫一次。

一般有三種傳值方式:1.父傳子、2.子傳父、3.兄弟元件之間通訊

1,父傳子

父元件的結構

父元件

子元件結構

子元件

}

2,子傳父

自定義事件給誰繫結的的,誰才能觸發

子元件a 

09-元件傳值-非父子

eventbus.js

import vue from 'vue'

export default new vue({})

com-b

// 繫結乙個事件 接收資料

eventbus.$on('tob', (data) => )

com-a

// 觸發自定義事件

eventbus.$emit('tob', 'a元件資料')

注意:先繫結事件,再觸發事件。

eventbus:

俗:公共汽車,繫結事件和觸發事件的公用vue例項。

專業:事件匯流排,在這個角色去控制所有的事件的繫結和觸發。

Vue元件傳值 父子元件傳值

父元件可以引入 使用子元件,從業務上看,該父元件有可能對子元件有個性化需求,為了體現元件的靈活多變,可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值,具體通過pro...

vue 元件傳值 父子元件傳值,兄弟元件傳值

父向子 v bind props 子元件 子元件 props msg props接收 props 驗證 props food接受數值型別的引數,如果不傳入的話預設就是100 food fooe接受物件型別的引數 fooe foof使用乙個自定義的驗證器 foof foog props 是單向繫結的 ...

Vue元件傳值

學習vue的傳值心得,剛入門vue,大佬勿噴,請多多指教。1.父元件傳值子元件 父元件巢狀子元件式,在標籤裡繫結 子元件用props屬性接收 例 父元件傳值,為縮寫,等同於v bind obj item props obj count 子元件接收傳值,可直接使用,但是推薦在下方重新賦值給新變數再使用...