兄弟通信：

1.bus事件總線（用得較少，用于小項(xiàng)目）

原理：從子到父，再?gòu)母傅阶?，?shí)現(xiàn)兄弟通訊

2.vuex（用得較多，用于大項(xiàng)目）

父子通信

實(shí)現(xiàn)方法

父?jìng)髯樱?/h4>

父：通過自定義屬性將所要傳入的值寫入屬性內(nèi)

子：通過props進(jìn)行接收

即可使用

子傳父：

父：通過自定義事件

例如：@事件名=“函數(shù)方法”

子：通過父?jìng)鬟^來的自定義事件進(jìn)行回調(diào)

利用this.$emit('事件名',值or數(shù)據(jù))進(jìn)行回調(diào)
調(diào)用事件后，將使用事件里的方法，此時(shí)就可以通過方法接收子的值

實(shí)現(xiàn)代碼：

父組件

<template>
  <div>123
    <!-- <Form title="123"></Form> -->
    <!-- 自定義屬性titles,將值title傳入子組件 -->
    <!-- 自定義事件aaa 由子組件觸發(fā)函數(shù)getUsername -->
    <Form :titles="title" @aaa="getUsername"></Form>
  </div>
</template>

<script>
import Form from "./components/Form";
export default {
  data() {
    return {
      title: "添加電影"
    };
  },
  methods: {
    //接受子組件的數(shù)據(jù)data 并執(zhí)行函數(shù)
    getUsername(data) {
      console.log(data);
    }
  },
  //注冊(cè)組件(全局組件不用注冊(cè))
  components: {
    Form
  }
};
</script>

子組件

  <!-- 子組件 -->
  <template>
  <div>
    <!-- 打印屬性 -->
    <h3>{{titles}}</h3>用戶名:
    <input type="text" v-model="username">
    <!-- 設(shè)置一個(gè)點(diǎn)擊事件 -->
    <button @click="submit">獲取數(shù)據(jù)</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ""
    };
  },
  //接受屬性titles 通過屬性props 父組件向子組件傳遞,子組件不應(yīng)該直接修改父組件的屬性
  props: ["titles"],
  methods: {
    //點(diǎn)擊后執(zhí)行函數(shù) this.$emit向父組件aaa傳遞 并帶上數(shù)據(jù)username
    submit() {
      this.$emit("aaa", this.username);
    }
  }
};
</script>