Vue兄弟组件间通信

最新推荐文章于 2025-11-13 12:19:08 发布

原创

最新推荐文章于 2025-11-13 12:19:08 发布 · 652 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文介绍了Vue中兄弟组件之间的通信方式，包括相邻兄弟组件和相隔多级的兄弟组件通信。对于相邻兄弟组件，可以通过结合父子组件通信的方式实现，例如通过父组件传递。对于相隔多级的兄弟组件，利用事件总线（天使实例）进行通信，通过在空实例上注册事件和触发事件来实现。文中提供了一个具体示例，展示了如何通过这种方法控制组件的显示和隐藏状态。

Vue兄弟组件间的通信分为两种：一种是相邻兄弟组件(有相同的父组件)的通信；另一种是相隔多级(有共同的祖先及组件)的兄弟组件通信。

第一种兄弟通信，相当于父子组件通信和子父组件通信的结合(之前介绍过)，举一个简单例子：组件1和组件2是兄弟，组件2的按钮可以控制组件1中div的显示隐藏。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>作业</title>
  <script src='../vue.js'></script>
  <style>
   .test{
     width: 100px;
     height: 100px;
     background: red;
   }
  </style>
</head>
<body>
  <div id='app1'>  
    <!-- 将父亲的数据通过自定义属性传给组件1使用 -->
    <son1 :show='state'></son1>
    <hr>  
     <!-- 将父亲的方法通过自定义事件传给组件2使用 -->
    <son2 @custom='faToggle'></son2>
  </div>
  <hr>
  <!-- 组件1 -->
  <template id='son1'>
    <div>
       这里是组件1
       <div class='test' v-show='show'>
       </div>
    </div>
  </template>
 <!-