1.父子组件有使用关系,兄弟组件没有,所以不能直接监听. 2.发送数据的this只能供父子组件使用. 3.在组件中this可以发出事件,是一个Vuecomponent组件示例,而组件是一个可复用的Vue实例. 结论:Vue实例也能发出事件,this只能发给父组件,而Vue实例通用.在使用兄弟组件传值时通常会封装一个事件总线.

一、重点实现步骤

1.eventBus（事件总线） 实例化Vue

2.father（父组件） 2.1引入子组件 2.2注册 2.3使用

3.daughter(兄弟组件之一) 3.1引入事件总线组件 3.2发送事件

4.son(兄弟组件之一) 4.1引入事件总线组件 4.2监听daughter发出的数据

二、兄弟组件传值的使用过程

eventBus文件代码(js)

//事件总线:用来实现组件之间的数据传递
//在组件中this可以发出事件
//this是VueComponent组件实例
//而组件是一个可复用的Vue实例
//结论:Vue实例也能发出事件
import Vue from 'vue'
export default new Vue()

father1代码(vue)

.<template>
  <div class="father">
    <h1>我是父组件</h1>
    <!-- 步骤三:渲染使用示例 -->
    <son1></son1>
    <daughter1></daughter1>
  </div>
</template>

<script>
//步骤一:引入组件
import son1 from "./son1";
import daughter1 from "./daughter1";
export default {
  //步骤二:注册
  components: {
    son1,
    daughter1,
  },
};
</script>

.<style lang="less" scoped>
.father {
  //添加样式区分
  width: 100%;
  background-color: cadetblue;
}
</style>

son1(vue)

.<template>
  <div class="son">
    <h1>我是子组件son1</h1>
    <!-- 渲染示例 -->
    <h2>从daughter1那里接收的数据为:{{ userinfo }}</h2>
  </div>
</template>

<script>
// 步骤一:引入事件总线,跟另一个兄弟组件保持一致
import bus from "./utils/eventBus";
export default {
  data() {
    return {
      // 定义变量
      userinfo: "",
    };
  },
  // 步骤二:接收daughter1兄弟组件的数据
  //加载完毕即监听,所以放在mounted,语法:bus.on('事件类型',处理函数)
  mounted() {
    bus.$on("getuser", (data) => {
      console.log(data);
      //处理函数:这里为示例
      this.userinfo = data;
    });
  },
};
</script>
.<style lang="less" scoped>
.son {
  //添加样式区分
  width: 80%;
  background-color: cornflowerblue;
}
</style>

daughter代码(vue)

.<template>
  <div class="son">
    <h1>我是子组件daughter1</h1>
    <!-- 步骤二:点击调动发送数据 -->
    <button @click="senduser">按钮</button>
  </div>
</template>

<script>
//   步骤三:引入事件总线
import bus from "./utils/eventBus";
export default {
  // 步骤一:准备数据
  data() {
    return {
      username: "山竹",
    };
  },
  // 步骤四:发送事件
  //语法:事件总线名.$emit('自定义事件类型',传递的数据)
  methods: {
    senduser() {
      bus.$emit("getuser", this.username);
    },
  },
};
</script>
.<style lang="less" scoped>
.son {
  //添加样式区分
  margin-top: 20px;
  width: 80%;
  background-color: coral;
}
</style>

效果

三、常见报错问题

Error in mounted hook: "ReferenceError: bus is not defined"

看下是不是引入事件总线,或者没定义

Error in mounted hook: "TypeError: utils_eventBus__WEBPACK_IMPORTED_MODULE_0_.default.on is not a function"

看下是不是on前面没加$