Vue 兄弟組件通信的方法（不使用Vuex）

項目中，我們經常會遇到兄弟組件通信的情況。在大型項目中我們可以通過引入vuex輕松管理各組件之間通信問題，但在一些小型的項目中，我們就沒有必要去引入vuex。下面簡單介紹一下使用傳統方法，實現父子組件通信的方法。

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

主要的思路就是：先子傳父，在父傳子

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

示例中我們通過this.$emit() 去觸發isLogFn 這個方法自定義事件，并將log 參數傳遞出去

a.vue

<template>
 <div class="adiv">
 <p>a組件</p>
 <button type="button" v-on:click="handleClick">點擊打開組件b彈窗</button>
 </div>
</template>

<script>

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

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

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

示例中，<aPage @isLogFn = "lisLogFn"></aPage> 監聽isLogFn 去觸發我們在父組件中定義的方法lisLogFn，并拿到傳過來的 ‘log' 數據。完成子父傳值。

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

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

App.vue

<template>
 <div id="app">
 <aPage @isLogFn = "lisLogFn"></aPage>
 <bPage :isLog = "login"></bPage>
 </div>
</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>
 <div class="bdiv" v-show="isLogin">我是組件B彈窗</div>
</template>

<script>
export default {
 props: ['isLog'],
 data () {
 return {

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

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

</style>

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

子父：

1. 子組件中需要以某種方式例如點擊事件的方法來觸發一個自定義事件
2. 將需要傳的值作為$emit的第二個參數，該值將作為實參傳給響應自定義事件的方法
3. 在父組件中注冊子組件并在子組件標簽上綁定對自定義事件的監聽

父子：

1. 子組件在props中創建一個屬性，用以接收父組件傳過來的值
2. 在子組件標簽中添加子組件props中創建的屬性，把需要傳給子組件的值賦給該屬性

文中示例 github 地址：https://github.com/enjoy-pany/vue-emit

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。