專案中，我們常常會遇到兄弟元件通訊的情況。在大型專案中我們可以透過引入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('isLogFn','log')
}
}
}
</script>
<style>
.ap{
width: 400px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
}
</style>第二步，我們要在父元件中去監聽這個自訂事件，去觸發對應的方法，並接受a元件傳過來的參數。此時我們就完成了子組件傳值給父組件的過程。在
範例中，
到此，整個過程還沒結束，只是完成了一半。接下來我們要完成父子組件傳值，將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 './components/a.vue'
import bPage from './components/b.vue'
export default {
data () {
return {
login: 'false'
}
},
name: 'app',
components: {
aPage,
bPage
},
methods: {
lisLogFn (data) {
if (data == 'log') {
this.login = 'true'
}
}
}
}
</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: ['isLog'],
data () {
return {
}
},
computed: {
isLogin () {
if(this.isLog == 'true'){
return true
} else {
return false
}
}
}
}
</script>
<style>
.bp{
width: 200px;
height: 200px;
border: 1px #000 solid;
margin: 0 auto;
}
</style>總結： 想要實作兄弟元件傳值，一定要先熟悉子父，父子之間的傳值。
子父：
子元件中需要以某種方式例如點擊事件的方法來觸發一個自訂事件
#將需要傳的值作為$emit的第二個參數，該值將作為實參傳給回應自訂事件的方法
在父元件中註冊子元件並在子元件標籤上綁定對自訂事件的監聽
父子：
子元件在props中建立屬性，用以接收父元件傳過來的值
在子元件標籤中加入子元件props中建立的屬性，把需要傳給子元件的值賦給該屬性
相關推薦：
以上是Vue 兄弟組件通訊的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
