Vue组件通信（关系组件和非关系组件）

Vue组件通信

概念引入

 

组件是Vue的一个重要概念，有效的利用了封装的思想（可以类比js的函数或者类）。我们通常会把一个单页应用中的各种模块拆分成一个一个单独的组件，利用这些组件组装成一个完整的功能，具有很好的复用性和维护性。

既然是封装就涉及输入和输出，而多个组件之间如何处理输入和输出是我们经常会面临到的问题，也是我们经常说的组件通信，通信的本质是需要通信的两个组件可以说上话，所以以下我们针对这个问题进行一些总结。

组件间通信

1、父子组件通信：props/$emit

父组件A使用props向子组件B传递消息，比如父组件中使用<Child title="my name is Parent" ></Child>可以向子组件传递title，子组件B使用 props: ["title"]接收后即可使用（当然props接收的格式有很多详情可以查阅https://cn.vuejs.org/v2/guide/components-props.html）

子组件B通过$emit向父组件A发送消息，父组件A通过v-on或者@获取传递的信息，比如子组件B通过this.$emit("child", "123");

发送了123，A组件通过@监听child <Child title="my name is Parent" @child="handleChild"></Child> 即可捕获B发出的123。

//Child.Vue
​
<template>
  <div>
    <h1>
      {
  { title }}
      <button @click="handleClick">emit</button>
    </h1>
    child
  </div>
</template>
​
<script>
export default {
  props: ["title"],
​
  methods: {
    handleClick() {
      this.$emit("child", "123");
    },
  },
};
</script>
​
<style scoped></style>
​

//Parent.vue
​
<template>
  <div>
    Parent
​
    <CompA>
      <Child title="my name is Parent" @child="handleChild"></Child>
    </CompA>
  </div>
</template>
​
<script>
import Child from "./Child";
export default {
  components: {
    Ch