兄弟元件之間的資料傳值

• 兄弟元件 指的是在同一個根元件中的元件, 元件之間沒有使用關係
• 兄弟元件之間的資料傳值有兩種方式:
  • 第一種在元件結構相對簡單情況下,可以通過兄弟元件中的父元件, 子元件先把資料傳遞給父元件, 父元件再傳遞給另外的子元件
  • 第二種 在兄弟元件中建立一個公共的vue例項來實現事件的發出和監聽
  • vue例項:

  • import Vue from 'vue'
    export default new Vue()

  • 在子元件中引入公共的vue例項, 通過vue例項來發出事件

  • methods: {
        tellname () {
           // 發出事件，傳遞資料　　givename自定義事件
     
    
    　　   bus.$emit('givename', this.mybfname) 
    　　} 
    }

  • 在另外的子元件引入公共vue例項,通過vue例項監聽事件並接收資料

  • import bus from '@/utils/myvue.js'
    
    // 元件一載入就進行兄弟元件所發出的事件的監聽
      mounted () {
        // $(dom).on('click',function(){})
        // bus.$on(兄弟元件中自定義的事件, 處理函式)
        // 處理函式有一個預設引數，就是其它元件所傳遞的資料
        bus.$on('givename', (data) => {
          console.log(data);
          
     
    this.mysbfname = data
        })
      }

總結

1.只要你是通過公共的事件總件來發出事件，那麼在任何一個元件中就能通過這個公共的事件總件進行事件的發出即監聽
2.這種方式超出了元件使用關係的限制
3.在元件中使用this發出事件，只能在父元件中進行監聽