Vue 父子组件互相通信

为了保证单项数据流，在 Vue 中，父子组件的关系可以总结为 props 向下传递，事件向上传递。

即父组件通过 props 给子组件下发数据，子组件通过事件的方式给父组件发送信息。

一，父传子

1，父组件传值给子组件

在父组件中，用 v-bind 动态绑定一个自定义属性，用于给子组件传递数据

<template>
  <div class="parent">
    <child :msg="msg"></child>
  </div>
</template>

<script>
import { child } from "./child";
export default {
  components: { child },
  data() {
    return {
      msg: 2333
    };
  }
};
</script>

2，子组件接收父组件传过来的数据

在子组件中，使用 props 接收父组件穿过来的数据。

注意：这里 props 中定义的属性要和父组件中，父组件要给子组件传递数据的那个自定义属性匹配；

<template>
  <div class="child">{{ msg }}</div>
</template>

<script>
export default {
  props: ["msg"]
};
</script>

二，子传父

1，子组件给父组件传值

子组件通过事件的方式，利用 $emit 给父组件传值。

注意：$emit 的第一个参数是一个自定义事件的方法名，后边的 “2333” 是子组件要给父组件传递的数据；

<template>
  <div class="child">
    <button @click="msg"></button>
  </div>
</template>

<script>
export default {
  methods: {
    msg() {
      this.$emit("the_data", 2333);
    }
  }
};
</script>

2，父组件接收子组件传递过来的数据

在父组件的子组件标签里，要写上子组件中的那个自定义的事件用于监听子组件接收数据；

<template>
  <div class="parent">
    <child @the_data="getData"></child>
  </div>
</template>

<script>
import { child } from "./child";
export default {
  components: { child },
  methods: {
    getData(value) {
      // value 就是子组件传递过来的数据
    }
  }
};
</script>

以上，就是父子组件互相通信的全部内容了。

如果两个组件之间没有父子关系还是想要通信怎么办呢？

请看我的下篇博客《Vue事件总线 eventBus》🌸✨🌼🌻🌺