Vue.js元件通訊實例分享

因為對Vue.js很感興趣，而且平常工作的技術堆疊也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js源碼，並做了總結與輸出。元件 (Component) 是 Vue.js 最強大的功能之一。元件可以擴充 HTML 元素，封裝可重複使用的程式碼。以下透過本文來跟大家分享Vue.js組件溝通的幾個姿勢，有興趣的朋友一起來看看吧。

寫在前面

可能會有理解有偏差的地方，歡迎提issue指出，共同學習，共同進步。

什麼是Vue元件？

元件 (Component) 是 Vue.js 最強大的功能之一。元件可以擴充 HTML 元素，封裝可重複使用的程式碼。在較高層面上，元件是自訂元素，Vue.js 的編譯器為它添加特殊功能。在某些情況下，元件也可以是原生 HTML 元素的形式，以 is 特性擴充。

Vue組件間通訊

父元件向子元件通訊

方法一：props

使用props ，父元件可以使用props向子元件傳遞數據。

父元件vue模板father.vue

<template>
  <child :msg="message"></child>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  data () {
    return {
      message: 'father message';
    }
  }
}
</script>

子元件vue模板child.vue

<template>
  <p>{{msg}}</p>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  }
}
</script>

方法二使用$children

使用$children 可以在父組件中存取子組件。

子元件向父元件通訊

方法一:使用vue事件

父元件傳遞事件方法，子元件透過$emit觸發事件，回呼給父組件。

父元件vue範本father.vue

<template>
  <child @msgFunc="func"></child>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  methods: {
    func (msg) {
      console.log(msg);
    }
  }
}
</script>

子元件vue範本child.vue

<template>
  <button @click="handleClick">点我</button>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  methods () {
    handleClick () {
      //........
      this.$emit('msgFunc');
    }
  }
}
</script>

方法二： 透過修改父元件傳遞的props來修改父元件資料

這種方法只能在父元件傳遞一個引用變數時可以使用，字面變數無法達到對應效果。因為飲用變數最終無論是父元件中的資料或子元件所得到的props中的資料都是指向同一塊記憶體位址，所以修改了子元件中props的資料即修改了父元件的資料。

但不建議這麼做，不建議直接修改props的值，如果資料是用來顯示修改的，在實際開發中我經常會將其放入data中，在需要回傳給父元件的時候再用事件回傳資料。這樣做保持了元件獨立以及解耦，不會因為使用同一份資料而導致資料流異常混亂，只透過特定的介面傳遞資料來達到修改資料的目的，而內部資料狀態由專門的data負責管理。

方法三：使用$parent

使用 $parent 可以存取父元件的資料。

非父子組件、兄弟組件之間的資料傳遞

非父子組件通信，Vue官方推薦 使用一個Vue實例作為中央事件總線 。

Vue內部有一個事件機制，可以參考 原始碼 。

$on方法用來監聽一個事件。

$emit用來觸發一個事件。

/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();
/*监听事件*/
event.$on('eventName', (val) => {
  //......do something
});
/*触发事件*/
event.$emit('eventName', 'this is a message.');

多層級父子元件通訊：

在Vue1.0中實作了$broadcast與$dispatch兩個方法用來向子元件（或父元件）廣播（或派發），當子元件（或父元件）上監聽了事件並回傳true的時候會繼續向爺孫層級元件廣播（或派發）事件。但是這個方法在Vue2.0裡面已經被移除了。

之前在學習餓了麼的開源元件庫 element 的時候發現他們重新實作了broadcast以及dispatch的方法，以mixin的方式引入，具體可以參考 《說說element元件庫broadcast與dispatch》。但是跟Vue1.0的兩個方法實作有略微的不同。這兩個方法實作了向子孫元件事件廣播以及向多層級父元件事件派發的功能。但並非廣義的事件廣播，它需要指定一個commentName進行向指定元件名稱元件定向廣播（派發）事件。

其實這兩個方法內部實作還是用到的還是$parent以及$children，用以遍歷子節點或是逐級向上查詢父節點，訪問到指定元件名的時候，呼叫$emit觸發指定事件。

複雜的單頁應用程式資料管理

當應用程式足夠複雜情況下，請使用 vuex 進行資料管理。

相關推薦：

Vue 兄弟元件通訊的方法

vue中的event bus非父子元件通訊詳解

深入探討Vue.js元件與元件通訊

以上是Vue.js元件通訊實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！