Vue 兄弟組件通訊的方法

專案中，我們常常會遇到兄弟元件通訊的情況。在大型專案中我們可以透過引入vuex輕鬆管理各元件之間通訊問題，但在一些小型的專案中，我們就沒有必要去引入vuex。以下簡單介紹一下使用傳統方法，實作父子元件通訊的方法。這篇文章主要介紹了Vue 兄弟組件通訊的方法（不使用Vuex），小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

簡單實例：我們在a元件中點擊按鈕，將訊息傳遞給b元件，從而使b元件彈出。

主要的想法是：先子傳父，在父傳子

首先我們在a.vue 元件中，給按鈕botton綁定一個handleClick事件，事件中我們透過this.$emit(） 方法去觸發一個自訂事件，並傳遞我們的參數。

範例中我們透過this.$emit() 去觸發isLogFn 這個方法自訂事件，並將log 參數傳遞出去

a.vue

<template>
 <p class="ap">
 <p>a组件</p>
 <button type="button" v-on:click="handleClick">点击打开组件b弹窗</button>
 </p>
</template>

<script>

export default {
 methods: {
 handleClick () {
  this.$emit(&#39;isLogFn&#39;,&#39;log&#39;)
 }
 }
}
</script>

<style>
.ap{
 width: 400px;
 height: 200px;
 border: 1px solid #000;
 margin: 0 auto;
}
</style>

第二步，我們要在父元件中去監聽這個自訂事件，去觸發對應的方法，並接受a元件傳過來的參數。此時我們就完成了子組件傳值給父組件的過程。在

範例中， 監聽isLogFn 去觸發我們在父元件中定義的方法lisLogFn，並且拿到傳過來的 ‘log' 資料。完成子父傳值。

到此，整個過程還沒結束，只是完成了一半。接下來我們要完成父子組件傳值，將a組件的資訊傳給b組件。

在< bPage > 標籤中綁定islog 屬性，動態綁定data中的login 字段,在我們通過lisLogFn 方法拿到'data'之後，我們要判斷data 傳過來的數據，根據判斷結果去改變data（）中的數據，從而將數據傳遞給b組件

App.vue

<template>
 <p id="app">
 <aPage @isLogFn = "lisLogFn"></aPage>
 <bPage :isLog = "login"></bPage>
 </p>
</template>

<script>

import aPage from &#39;./components/a.vue&#39;
import bPage from &#39;./components/b.vue&#39;

export default {
 data () {
 return {
  login: &#39;false&#39;
 }
 },
 name: &#39;app&#39;,
 components: {
 aPage,
 bPage
 },
 methods: {
 lisLogFn (data) {
  if (data == &#39;log&#39;) {
  this.login = &#39;true&#39;
  }
 }
 }
}
</script>

<style>
</style>

最後，b元件中需要創建props，定義一個isLog 屬性，這個屬性就是我們傳過來的數值。然後我們在計算屬性中處理這個數據，最後供b組件使用。範例中，我們在v-show="isLogin" 中用來控制彈跳窗是否開啟。

記得！不能直接使用這個props，一定要經過computed處理，原因我引用vue官方說明

單向資料流

b.vue

<template>
 <p class="bp" v-show="isLogin">我是组件B弹窗</p>
</template>

<script>
export default {
 props: [&#39;isLog&#39;],
 data () {
 return {

 }
 },
 computed: {
 isLogin () {
  if(this.isLog == &#39;true&#39;){
  return true
  } else {
  return false
  }
 }
 }
}
</script>

<style>
 .bp{
 width: 200px;
 height: 200px;
 border: 1px #000 solid;
 margin: 0 auto;
 }

</style>

總結： 想要實作兄弟元件傳值，一定要先熟悉子父，父子之間的傳值。

子父：

1. 子元件中需要以某種方式例如點擊事件的方法來觸發一個自訂事件

2. #將需要傳的值作為$emit的第二個參數，該值將作為實參傳給回應自訂事件的方法

3. 在父元件中註冊子元件並在子元件標籤上綁定對自訂事件的監聽

父子：

1. 子元件在props中建立屬性，用以接收父元件傳過來的值

2. 在子元件標籤中加入子元件props中建立的屬性，把需要傳給子元件的值賦給該屬性

相關推薦：

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

Vue.js元件通訊中的幾個姿勢具體分析

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

以上是Vue 兄弟組件通訊的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！