Vue组件之间的传递通信

Vue组件之间的通信可以通过多种方式实现，包括但不限于以下几种：

一、父子组件通信

1.父组件向子组件传递数据：

使用props传递数据

在Vue中，父组件可以通过props向子组件传递数据。props是子组件的自定义属性，用于接收父组件传递过来的数据。

父组件代码示例：

<template>  
  <div>  
    <parent-component>  
      <child-component :message="parentMessage"></child-component>  
    </parent-component>  
  </div>  
</template>  
  
<script>  
import ParentComponent from './ParentComponent.vue';  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ParentComponent,  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from Parent'  
    };  
  }  
};  
</script>

子组件代码示例： 

<template>  
  <div>  
    <p>{{ message }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  props: ['message']  
};  
</script>

---

 在这个例子中，父组件通过props向子组件传递了一个名为message的数据，子组件接收后，在模板中显示了这个数据。

子组件 (ChildComponent.vue)

<template>  
  <div>  
    <h2>{{ message }}</h2>  
  </div>  
</template>  
  
<script>  
export default {  
  props: {  
    // 声明一个名为 message 的 prop  
    message: {  
      type: String, // 指定类型  
      required: true // 指定该 prop 是否为必需  
    }  
  }  
};  
</script>

在这个例子中，子组件 ChildComponent 声明了一个名为 message 的 prop，并指定了它的类型为 String，同时设置为 required，意味着父组件必须传递这个 prop。

父组件 (ParentComponent.vue)

<template>  
  <div>  
    <child-component message="Hello from Parent!"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  }  
};  
</script>

在父组件 ParentComponent 中，我们引入了子组件 ChildComponent，并在模板中使用了它。我们通过属性 message 向子组件传递了一个字符串 "Hello from Parent!"。

使用动态 Props

props 也可以是动态的，这意味着你可以基于父组件的数据或计算属性来传递值。

<template>  
  <div>  
    <child-component :message="dynamicMessage"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      dynamicMessage: 'Hello from Parent (dynamic)!'  
    };  
  }  
};  
</script>

在这个例子中，父组件使用 :message（等同于 v-bind:message）来绑定一个动态值 dynamicMessage 到子组件的 message prop。

Props 验证

你还可以为 props 提供验证，以确保传递给子组件的数据是符合预期的。

props: {  
  message: {  
    type: String,  
    required: true,  
    validator: function(value) {  
      // 这个值必须匹配正则表达式 /^hello/  
      return /^hello/.test(value);  
    }  
  }  
}

在这个例子中，validator 函数用于检查传递的 message 是否以 "hello" 开头。

使用 props 是 Vue.js 组件间通信的一种非常常见和推荐的方式，因为它使得组件更加解耦和可重用。

使用$refs传递数据

$refs是Vue实例的一个属性，它提供了对子组件实例的直接访问。父组件可以通过$refs访问子组件的实例，从而直接调用子组件的方法或访问其数据。

<!-- 父组件 -->  
<template>  
  <div>  
    <child-component ref="childRef"></child-component>  
    <button @click="callChildMethod">Call Child Method</button>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    callChildMethod() {  
      // 通过 $refs 调用子组件的方法  
      this.$refs.childRef.someChildMethod();  
    }  
  }  
};  
</script>

<!-- 子组件 ChildComponent.vue -->  
<template>  
  <div>  
    <!-- Some content -->  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    someChildMethod() {  
      // 子组件的方法实现  
      console.log('Method in child component called');  
    }  
  }  
};  
</script>

使用v-model指令

虽然v-model通常用于表单输入和组件之间的双向数据绑定，但它也可以用于父传子。在父组件中使用v-model绑定子组件的某个prop，子组件内部需要触发input事件来更新父组件的数据。

使用$parent

使用$parent，子组件可以访问父组件的数据、计算属性、方法以及其它实例属性。但是，通常并不推荐频繁使用$parent，因为它破坏了组件的封装性，使得组件之间的耦合度变高，不利于代码维护和测试。

2.子组件向父组件传递数据：

使用$emit方法

子组件通常通过触发事件向父组件传递数据。在Vue中，子组件可以使用$emit方法触发一个自定义事件，并传递数据作为参数。父组件可以通过监听这个事件来接收数据。

子组件代码示例：

<template>  
  <div>  
    <button @click="sendDataToParent">Send Message to Parent</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    sendDataToParent() {  
      const childMessage = 'Hello from Child';  
      this.$emit('child-event', childMessage);  
    }  
  }  
};  
</script>

 父组件代码示例：

<template>  
  <div>  
    <p>Message from Child: {{ childMessage }}</p>  
    <child-component @child-event="handleChildEvent"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      childMessage: ''  
    };  
  },  
  methods: {  
    handleChildEvent(payload) {  
      this.childMessage = payload;  
    }  
  }  
};  
</script>

provide/inject

祖先组件可以通过provide选项提供数据，子孙组件可以通过inject选项注入这些数据。这种方法主要用于高阶组件库的开发。

---

二、非父子组件通信

事件总线（Event Bus）：

通过创建一个全局的Vue实例作为事件总线，在组件中通过$emit和$on来触发和监听事件。

创建一个新的 Vue 实例作为事件总线，并在需要通信的组件中引入它。

// event-bus.js 
import Vue from 'vue'; 
export const EventBus = new Vue();

然后，在需要发送事件的组件中：

// ChildComponent.vue 
import { EventBus } from './event-bus.js'; 


export default { 
methods: { 
sendToOtherComponent() { 
        EventBus.$emit('event-name', 'data to send'); 
        } 
    } 
};

在需要接收事件的组件中：

// OtherComponent.vue  
import { EventBus } from './event-bus.js';  
  
export default {  
  created() {  
    EventBus.$on('event-name', this.handleEvent);  
  },  
  beforeDestroy() {  
    EventBus.$off('event-name', this.handleEvent);  
  },  
  methods: {  
    handleEvent(data) {  
      console.log('Received data from ChildComponent:', data);  
    }  
  }  
};

Vuex 状态管理

对于更复杂的状态管理需求，Vuex 是一个很好的选择。Vuex 是一个专门为 Vue.js 设计的状态管理库，它允许你在多个组件之间共享状态，并通过提交 mutations 来改变状态。

可以看我的这篇文章：Vuex介绍-CSDN博客

三、兄弟组件通信

共享父组件状态：如果两个兄弟组件有共同的父组件，可以将需要共享的数据作为父组件的状态，然后通过props传递给两个兄弟组件。

也可以使用事件总线（Event Bus）和Vuex