兄弟通信：

1.bus事件总线（用得较少，用于小项目）

原理：从子到父，再从父到子，实现兄弟通讯

2.vuex（用得较多，用于大项目）

父子通信

实现方法

父传子：

父：通过自定义属性将所要传入的值写入属性内

子：通过props进行接收

即可使用

子传父：

父：通过自定义事件

例如：@事件名=“函数方法”

子：通过父传过来的自定义事件进行回调

利用this.$emit('事件名',值or数据)进行回调
调用事件后，将使用事件里的方法，此时就可以通过方法接收子的值

实现代码：

父组件

<template>
  <div>123
    <!-- <Form title="123"></Form> -->
    <!-- 自定义属性titles,将值title传入子组件 -->
    <!-- 自定义事件aaa 由子组件触发函数getUsername -->
    <Form :titles="title" @aaa="getUsername"></Form>
  </div>
</template>

<script>
import Form from "./components/Form";
export default {
  data() {
    return {
      title: "添加电影"
    };
  },
  methods: {
    //接受子组件的数据data 并执行函数
    getUsername(data) {
      console.log(data);
    }
  },
  //注册组件(全局组件不用注册)
  components: {
    Form
  }
};
</script>

子组件

  <!-- 子组件 -->
  <template>
  <div>
    <!-- 打印属性 -->
    <h3>{{titles}}</h3>用户名:
    <input type="text" v-model="username">
    <!-- 设置一个点击事件 -->
    <button @click="submit">获取数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ""
    };
  },
  //接受属性titles 通过属性props 父组件向子组件传递,子组件不应该直接修改父组件的属性
  props: ["titles"],
  methods: {
    //点击后执行函数 this.$emit向父组件aaa传递 并带上数据username
    submit() {
      this.$emit("aaa", this.username);
    }
  }
};
</script>