目錄

一, 簡單介紹組件通信

二, 詳解傳值方法

1.父傳子 props

2.子傳父 $emit

3.跨組件通信 event-bus

一, 簡單介紹組件通信

我們知道在現在的開發環境下,不管前后端開發都是組件化模塊化,這是因為組件的優勢無比的巨大,可以進行多次的復用增加開發效率,也可以分類鮮明,便于維護,而我今天所寫的就是開發中分割成不同的組件互相傳遞資料和互動

我的作業中常用地組件通信大致分為三類: 父傳子 , 子傳父 , 跨組件傳值

下面就來分別介紹一下 我常用的這三種傳值方法

二, 詳解傳值方法

父子組件的確認方法:我將 B 組件import引入到 A 組件中,那么 B 就是 A 的子組件,A 就是 B 的父組件

1.父傳子 props

簡而言之,父傳子就是父組件把資料傳給子組件,具體就是如下,在子組件的props中定義自定義屬性來待接收父組件的資料,有兩種方法 如下:

第一種,也是最推薦用的一種,以復雜型別的方式進行宣告,這樣存盤的便是一個地址,可以和父組件的資料進行雙向系結,同步資料,雖然可以雙向系結,但是在Vue2.0中還是不可以直接在子組件中更改父組件的資料,需要用到子傳父才行,這點等下會寫到

這里只是用 text 舉個栗子,具體叫什么都可以哈,只是父子里面需要對應上相同

這個 text 接收到資料后的使用方法和一般data中宣告的變數一樣,只是不能再子組件中改變他

子組件中: props 定義屬性接收

<template>
  <div>
    <h2>son組件</h2>
    <p>props:{{ text }}</p>
  </div>
</template>

<script>
export default {
  // 在此處定義props
  props: {
    // props中定義 接收父組件資料的自定義屬性,叫什么都可以,我隨便起了個text
    text: {
      type: String,    // type 是用來規定此屬性接收到的資料的資料型別
      default: "未傳遞時默認的文字"    // 這個default是當這個 text 沒有接收到傳遞的資料時的默認值
    }
  }
}
</script>

父組件中: 標簽內 傳遞資料

<template>
  <div id="app">
    <!-- 
      這里的text就是子組件props里定義的text,這兩個名字得一致
      并且傳遞的資料也要符合 type 規定的資料型別
      text就是傳遞字串,:text就是傳遞動態資料
      -->
    <Son text="我是大娃 傳給子啦" />
    <Son :text="wenzi" />
  </div>
</template>

<script>
import Son from './components/son.vue';
export default {
  data () {
    return {
      wenzi: '我是二娃 傳給子啦'
    }
  },
  components: {
    Son
  }
}
</script>

如上 雖然我的注釋寫的很清楚了,但是還是在介紹一下, <Son/> 是子組件的標簽,在此標簽的基礎上書寫 子組件props 定義的屬性名,并且傳遞引數具體對應關系和效果如下:

如上就是第一種我最常用的父傳子,其實還有一種方法,但是我一般也不用,很不方便,也貼到下邊了,這個是以陣列方式宣告

export default {
  // 在此處定義props
  props: ['text']
}
</script>

?

2.子傳父 $emit

剛剛說到了在 Vue2.0 子組件不能直接改父組件的資料,否則會報錯,這個解決方法就是在子組件中發起一個 自定義事件 ,在父組件監聽這個事件,并且定義一個函式來改變資料,具體操作如下:

子組件: 發起一個自定義事件,等待父組件監聽到執行函式

<template>
  <div>
    <h2>son組件</h2>
    <p>props:{{ text }}</p>
    <button @click="changeTextFn">改變文字</button>
  </div>
</template>

<script>
export default {
  // 在此處定義props
  props: {
    // props中定義 接收父組件資料的自定義屬性,叫什么都可以,我隨便起了個text
    text: {
      type: String,    // type 是用來規定此屬性接收到的資料的資料型別
      default: "未傳遞時默認的文字"    // 這個default是當這個 text 沒有接收到傳遞的資料時的默認值
    }
  },

  methods: {
    // 按鈕點擊事件
    changeTextFn () {
      // 發起自定義事件,名字叫什么都行,第一個引數是事件名,之后再跟著的都是傳遞的引數
      this.$emit('changeFn', '我想變成三娃')
    }
  }
}
</script>

我先在原有的代碼上添加了一個<button>按鈕,在點擊呼叫的函式中,通過 $emit 來發起事件并且可以傳遞引數

格式: this.$emit('changeFn', '我想變成三娃')

格式: this.$emit('自定義事件名', 傳遞的引數)

父組件: 行內監聽子組件的 自定義事件名(函式上不用寫引數,在 methods 中直接寫形參就行)

<template>
  <div id="app">
    <Son :text="wenzi" @changeFn="changeFn" />
  </div>
</template>

<script>
import Son from './components/son.vue';
export default {
  data () {
    return {
      wenzi: '我是二娃 傳給子啦'
    }
  },

  components: {
    Son
  },

  methods: {
    // 監聽子組件自定義事件
    changeFn (newText) {
      // 這里的形參接受到的就是子組件中 第二個引數傳遞的數值
      this.wenzi = newText
    }
  }
}
</script>

對應關系和效果圖如下:

3.跨組件通信 event-bus

如果兩個組件的關系非常的復雜或者沒有未產生直接聯系，那么通過父子組件通訊是非常麻煩的，這時候可以使用通用的組件通訊方案：事件總線（event-bus)

按照我的習慣,我會將事件總線創建到 main.js 中,這個使用原理是將bus掛載到Vue原型上,這樣就可以保證所有的組件都能通過 this.bus 訪問到事件總線,從而通過同一個事件總線監聽同一個事件,具體原理和父子傳參差不多,都是 $emit 傳遞資料, 只不過接收變成了$on

我這次以送禮物舉例用了兩個關系不大的組件 分別是 男組件 和 女組件 (隨便起的名)具體如下圖:

發送資料 男組件:

this.bus.$emit('自定義事件名',傳遞的引數)

<template>
  <div>
    <h1>男組件</h1>
    <button @click="sendGiftFn">送禮物</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      gift: '玫瑰花'
    }
  },

  methods: {
    sendGiftFn () {
      // 通過 bus 事件總線發起 自定義事件,并且傳遞引數(第一個是事件名,第二個開始是引數)
      this.bus.$emit('sendMessage', this.gift)
    }
  }
}
</script>

接收資料 女組件:

this.bus.$on('監聽的事件名',(e)=>{ e這個形參所接收的就是監聽事件所攜帶的引數資料 })

<template>
  <div>
    <h1>女組件</h1>
    <p>來自男組件的禮物:{{ info }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      info: ""
    }
  },

  created () {
    // e 就是 sendMessage 這個事件所傳遞的資料
    this.bus.$on("sendMessage", (e) => {
      this.info = e;
    });
  }
}
</script>

<style>
</style>

具體效果如下:

綜上所述,就是我在作業中總結出來的一些組建通信的方法,希望您看到這里會有所識訓