vue元件傳值的五種方式

2022-07-07 04:30:14 字數 1394 閱讀 3351

方法一 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.     3.         我是father元件

4.

5.

6. 7.

子元件

1. 2.     3.         我是son元件

4. send1

5. send2

6.

7. 9.

方法四 訊息發布與訂閱

安裝 pubsub-js 外掛程式: npm i pubsub-js -s 可實現全域性引數傳遞

元件a

1. 2.     3.         我是元件a

4. 傳送

5.

6. 8.

元件b

1. 2.     3.         我是元件b

4.

5. 7.

方法五 eventbus傳參

1.在main.js種掛載全域性eventbus

1. vue.prototype.$eventbus = new vue()
2.a元件

1. 2.     3.         我是元件a

4. 傳送

5.

6. 8.

3.b元件

1. 2.     3.         我是元件b

4.

5. 7.

通過掛載全域性vue物件傳遞引數。

vue中的五種元件傳值

1 父傳子 父親怎麼傳 通過屬性繫結形式傳 兒子怎麼接收 通過props來接收 2.子傳父 子怎麼傳 通過this.emi t觸發一 個自定義 事件,並 且傳送一 個值父怎 麼接收 通過定義 自定義事 件的事件 函式的形 參來接收 3.兄弟組 件傳值定 義乙個事 件中心,或者是第 三方接收 值的元件...

Vue元件傳參的五種方式

方法一 props傳參 父元件我是father元件 arr arr 子元件 我是son元件 方法二 事件傳遞 父元件我是father元件 子元件 我是son元件 方法三 事件監聽 父元件我是father元件 子元件 我是son元件 send1 send2 方法四 訊息發布與訂閱 安裝 pubsub ...

vue元件傳值的三種方式

非父子元件傳值 一種傳值 emit 1 父元件給子元件傳值 父元件繫結動態屬性傳值 傳方法 傳例項 2 子元件通過props 接收父元件傳過來的值 方法 父親例項 props methods 執行父元件方法也可直接呼叫 執行 特 如果子元件和父元件傳值的props和data中定義的重複則會衝突,都有...