方法一：組件通信_父傳子_props（屬性系結）

在進行組件通信之前，我們首先要明確父和子是誰，父傳子=>在父中引入子（被引入的是子）

1. 父傳子，要先在子組件內定義props變數，準備接收，然后再使用變數

2. 父組件內, 要展示封裝的子組件：

先在<script>標簽中引入子組件，并通過components注冊區域組件后使用子組件，在標簽中以屬性方式給props變數傳值

方法二：組件通信_子向父_自定義事件（事件系結）

在了解子向父通信之前我們要先知道單向資料流，從父到子的資料流向, 叫單向資料流

實作效果：

需求：點擊子組件中的砍價按鈕，修改父組件中的價格（在父向子的基礎上實作代碼）

1.在子組件中添加button按鈕并為按鈕添加點擊事件

2.在子組件中為props添加index屬性，并通過this.$emit（“自定義事件名”，實參）觸發父組件系結的自定義事件，導致父methods里事件處理函式被觸發執行

3.父組件內補充索引內容, 父 -> 索引 -> 子組件 (用于區分哪個子組件)，然后系結自定義事件和事件處理函式,語法: @自定義事件名="父methods里函式名"

完整代碼：

父：App.vue

<template>
  <div>
    <!-- 
      目標: 父(App.vue) -> 子(MyProduct.vue) 分別傳值進入
      需求: 每次組件顯示不同的資料資訊
      步驟(口訣):
        1. 子組件 - props - 變數 (準備接收)
        2. 父組件 - 傳值進去
     -->
  
    <Product v-for="(obj,ind) in list" :key="ind" :title="obj.proname" :price="obj.proprice" :art="obj.info" :index="ind" @jianyi="fn"></Product>
    
  </div>
</template>

<script>
// 1. 創建組件 (.vue檔案)
// 2. 引入組件
import Product from './components/MyProductSon.vue'
export default {
  data(){
    return {
      str: "全堆疊開發，你必須擁有",
      list: [
    { id: 1, proname: "超級好吃的棒棒糖", proprice: 18.8, info: '開業大酬賓, 全場8折' },
    { id: 2, proname: "超級好吃的大雞腿", proprice: 34.2, info: '好吃不膩, 快來買啊' },
    { id: 3, proname: "超級無敵的冰激凌", proprice: 14.2, info: '炎熱的夏天, 來個冰激凌了' },
],
    }
  },
  // 3. 注冊組件
  components: {
    // Product: Product // key和value變數名同名 - 簡寫
    Product
  },
  methods: {
    // 子組件每點擊一次按鈕價格，父組件中對應的價格就減一
    fn(index,num) {
    // 如果父組件中點擊的list單價<1就不再減少
    this.list[index].proprice>1&&(this.list[index].proprice=(this.list[index].proprice-num).toFixed(2))
    }
  },
}
</script>

<style>

</style>

子：MyProductSon.vue

<template>
  <div class="my-product">
    <h3>標題:{{title}}</h3>
    <p>價格:{{price}}元</p>
    <p>{{art}}</p>
    <button @click="fn">砍價-1</button>
  </div>
</template>

<script>
export default {
  props:['title','price','art','index'],
  methods: {
    fn() {
      // this.index是子組件props中index屬性在父組件對應的索引值
      //kanjia是自定義的事件名，需要與父組件中事件名一致
      this.$emit('kanjia',this.index,1)
    }
  },
}
</script>

<style scoped>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

方法三：跨組件通信EventBus（兄弟組件通信）

需求：點擊sonB按鈕修改sonA中的值

實作步驟：

1.在src/EventBus/index.js 路徑處– 創建空白Vue物件并匯出

// 創建空白vue物件并匯出 [作為事件總線]
import Vue from "vue";
export default new Vue();

2.在components檔案夾中分別創建要跨組件通信的兩個兄弟組件

3.為兄弟組件設定相應的內容后確定傳遞資料與接收資料的組件

傳遞資料組件：sonB.vue 接收資料組件：sonA.vue

4.在App.vue檔案中引入區域組件，完成創建并使用

<template>
  <div>
    <!-- 第三步：在template中使用組件 -->
      <sonA></sonA>
      <sonB></sonB>
  </div>
</template>

<script>
// 第一步：分別引入sonA和sonB組件
import sonA from './components/sonA.vue'
import sonB from './components/sonB.vue'
export default {
  // 第二步：通過components創建組件
  components:{
    sonA,
    sonB
  }
}
</script>

<style scoped>

</style>

5. 在要傳遞值的組件(sonB.vue)中引入事件總線EventBus，并通過EventBus.$emit('自定義事 件名',要傳遞的引數)將內容傳到sonA.vue中

<template>
  <div>
      <p>sonB</p>
      <button @click="fn">點我改變sonA的值</button>
  </div>
</template>

<script>
import EventBus from '../EventBus/index.js'
export default {
    name:'sonB',
    methods: {
    fn() {
    EventBus.$emit('bian','跟我走')
    }
  },
}
</script>

<style scoped>
  div {
     width: 200px;
    height: 100px;
    border: 1px solid red;
  }
</style>

6.在要接收值的組件(sonA.vue) 中引入事件總線EventBus并通過created中EventBus.$on('事件名', 函式體)完成內容修改

<template>
  <div>
      <p>sonA</p>
      <p>{{msg}}</p>
  </div>
</template>

<script>
import EventBus from '../EventBus/index'
export default {
    name:'sonA',
    data() {
        return {
            msg:'aaa'
        }
    },
    created() {
        EventBus.$on('bian',(val)=>{
            this.msg=val
        })
    },
}
</script>

<style scoped>
  div {
    width: 200px;
    height: 100px;
    border: 1px solid red;
  }
</style>