vue2中兄弟组件通讯

方法一：（bus事件总线）推荐

一、 main.js

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

二、App 搜索案例

APP组件
<template>
  <div class="app">
    <Search />
    <br />
    <hr />
    <List />
  </div>
</template>
<script>
import List from '@/components/List'
import Search from '@/components/search'
export default {
  name: 'App',
  components: { List, Search },
  data () {
    return {
      dataList: [],
    }
  }
}
</script>
<style>
.app {
  width: 90vw;
  margin: 20px auto;
}
</style>

三、在Search组件中 通过this.$bus.$emit方法先提交一个bus事件

Search组件
<!--
 * @Description: 
 * @Author: Ran junlin
 * @Date: 2022-02-11 10:02:28
 * @LastEditTime: 2022-02-11 14:44:38
 * @LastEditors: Ran junlin
-->
<template>
  <div class="search">
    <input type="text" placeholder="请输入名称" v-model="keyWord" />
    <button @click="searchBtn">搜索</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Test',
  data () {
    return {
      keyWord: ''
    }
  },
  methods: {
    searchBtn () {
      if (this.keyWord.trim()) {
        this.$bus.$emit('updateListData', [], true, false)
        axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(res => {
          this.$bus.$emit('updateListData', res.data.items, false, false)
        },
          error => {
            this.$bus.$emit('updateListData', [], false, false)
            console.log(error.message);
          }
        )
      }
    }
  },
}
</script>

<style scoped>
.search {
  width: 50%;
  margin: 0 auto;
}
input {
  width: 70%;
  height: 38px;
}
button {
  width: 60px;
  height: 38px;
  margin-left: 5px;
}
</style>

四、List组件中挂载和调用方法

<!--
 * @Description: 
 * @Author: Ran junlin
 * @Date: 2022-02-11 10:02:28
 * @LastEditTime: 2022-02-11 14:45:15
 * @LastEditors: Ran junlin
-->
<template>
  <div class="List-content">
    <ul class="list" v-if="dataList.length">
      <li v-for="item in dataList" :key="item.id">
        <transition appear>
          <div class="user-item">
            <img class="img" :src="item.avatar_url" alt="" />
            <span class="name">{{ item.login }}</span>
          </div>
        </transition>
      </li>
    </ul>
    <div v-if="loading">loading...</div>
    <div v-if="isFirst">欢迎！</div>
  </div>
</template>

<script>
export default {
  name: 'List',
  data () {
    return {
      dataList: [],
      isFirst: true,
      loading: false
    }
  },
  mounted () {
    this.$bus.$on('updateListData', (dataList, loading, isFirst) => {
      this.dataList = dataList
      this.loading = loading
      this.isFirst = isFirst
    })
  },
}
</script>

<style scoped>
.v-enter-active {
  animation: myAn 0.5s linear;
}
.v-leave-active {
  animation: myAn 0.5s reverse;
}
@keyframes myAn {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.List-content {
  width: 80vw;
}
.list {
  box-shadow: 3px 2px 3px 1px #ccc;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}
li {
  width: calc(100% / 3);
  height: 250px;
  list-style: none;
  margin: 10px auto;
  padding: 5px;
}
.img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.user-item {
  width: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  border: 1px solid rgb(230, 230, 230);
  border-radius: 9px;
}
.nodata {
  font-size: 24px;
  text-align: center;
  height: 200px;
  line-height: 200px;
  color: rgb(114, 109, 109);
}
</style>

二、 方法二：search传递给App父组件，父再传给list子组件（比较麻烦）

三、方法三（消息订阅与发布）

以pubsub中间件为例子

1.安装 npm i pubsub-js
2.引入 import pubsub from ‘pubsub-js’
3.search组件发布消息，使用 pubsub.publish(‘事件名’,参数)
4.list组件订阅

	this.dataList= pubsub.subscribe('事件',(msgName,参数)=>{
				console.log(this)
				// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
			})
		beforeDestroy() {
			// this.$bus.$off('hello')
			pubsub.unsubscribe(this.dataList)
		},