天天看點

vue兄弟元件的傳值

  寫這篇部落格是自己在做vue的一些項目中發現,雖然你更多的是簡單的一些父子元件的傳值,但是很多場景是需要兄弟元件的傳遞的,之前不太懂,現在有學習這個vue兄弟組建的傳值,來分享給大家

第一種傳值方式

  1.   建立一個bus.js的檔案
vue兄弟元件的傳值
vue兄弟元件的傳值

  2.建立兩個兄弟元件child2,child3,需要在每一個兄弟元件裡面引入bus.js

  child2元件通過調用$emit發送給child3

  child3通過$on函數來接受

vue兄弟元件的傳值
vue兄弟元件的傳值

第二種方式

  通過父元件進行值的傳遞,A元件傳給父元件,父元件再傳遞給B元件

   A.vue 綁定一個handelClick方法,向父元件發送參數,父元件在對應的A.vue上接受參數,在listLogin上去進行改變,然後傳遞給B.vue

vue兄弟元件的傳值
vue兄弟元件的傳值

B.vue上定義props去接受父元件傳遞的參數,通過接受回的這個參數,去控制b.vue的顯示和隐藏

注意在b.vue裡面不可以直接使用props接受回來的參數,因為props是單向資料流,當父元件發生變化時會傳遞給子元件,但是反過來是不行的,需要使用computed去監聽這個屬性值的變化,否則,子元件發生改變,父元件會提示警告

vue兄弟元件的傳值

vue兄弟元件的傳值,我知道的就這兩種,希望可以幫到更多學習vue的codeman