vue 的基礎知識--兄弟組件之間的數據傳值

兄弟組件之間的數據傳值

• 兄弟組件 指的是在同一個根組件中的組件, 組件之間沒有使用關系
• 兄弟組件之間的數據傳值有兩種方式:
  • 第一種在組件結構相對簡單情況下,可以通過兄弟組件中的父組件, 子組件先把數據傳遞給父組件,  父組件再傳遞給另外的子組件
  • 第二種 在兄弟組件中創建一個公共的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發出事件，只能在父組件中進行監聽