vue中的五種元件傳值

2021-10-07 20:13:19 字數 1197 閱讀 7728

1 父傳子

父親怎麼傳:通過屬性繫結形式傳

兒子怎麼接收:通過props來接收

2.子傳父

子怎麼傳:通過this.emi

t觸發一

個自定義

事件,並

且傳送一

個值父怎

麼接收:

通過定義

自定義事

件的事件

函式的形

參來接收

3.兄弟組

件傳值定

義乙個事

件中心,

或者是第

三方接收

值的元件

:通過該

事件中心

的emit觸發乙個自定義事件,並且傳送乙個值 父怎麼接收:通過定義自定義事件的事件函式的形參來接收 3.兄弟元件傳值 定義乙個事件中心,或者是第三方 接收值的元件:通過該事件中心的

emit觸發

乙個自定

義事件,

並且傳送

乙個值父

怎麼接收

:通過定

義自定義

事件的事

件函式的

形參來接

收3.兄

弟元件傳

值定義一

個事件中

心,或者

是第三方

接收值的

元件:通

過該事件

中心的on來定義自定義事件的事件函式來接收值

eventbus.

$on(

'gettab1'

,(data)

=>

)

另乙個兄弟元件怎麼傳:通過事件中心的$emit觸發對應的 刀了 on的事件,並且把值傳遞過去

eventbus.

$emit

('gettab1'

,this

.num)

4.跨元件傳值

vue.

component

('my-sub1',}

, provide:

, components:}'

, inject:

['money']}

}}}}

)new

vue(

)

5.vuex裡面的state裡面定義

vue元件傳值的五種方式

方法一 props傳參 父元件1.2.3.我是father元件 4.9.arr arr 10.11.12.子元件 1.2.我是son元件 3.4.方法二 事件傳遞 父元件1.2.3.我是father元件 4.5.6.8.子元件 1.2.3.我是son元件 4.5.7.方法三 事件監聽 父元件1.2....

VUE中元件傳值

1 父傳值v bind 父元件通過v bind data data 傳值,簡寫等同於 data data 將資料傳遞給引用的子元件 2 子接收props 子元件通過props接收父元件傳的值 props 簡單寫法 props data props是單向繫結的,子元件不可以修改父元件的值,在子元件中修...

Vue元件傳值 父子元件傳值

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