詳細聊聊vue元件是如何實現元件通訊的

<template>
  <div>
    <h1>父元件傳子元件</h1>
    <!-- 使用元件   自定義屬性 -->
    <MyCon :name="name" :age="age" />
  </div>
</template>
<script>
// 引入元件 --> 建立元件 -->  使用元件
// 引入元件
import MyCon from "./MyCon.vue";
export default {
   //  建立元件 
  components: { MyCon },
  // 資料
  data() {
    return {
      name: "張三",
      age: 38,
    };
  },
};
</script>

<template>
  <div>
    <h2>子元件</h2>
     // 直接在標籤中使用
    <p>{{ name }} {{ age }}</p>
    <button @click="fn">點選修改props的值</button>
  </div>
</template>
<script>
export default {
  // 子元件接收父元件傳來的資料
  props: ["name", "age"],
  methods: {
    fn() {
      this.name = "傻逼譚磊";
      this.age = 20
    },
  },
};
</script>

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h1>父元件</h1>
    <!-- 1. 父傳。自定義屬性 -->
    <MyProduct
      v-for="item in list"
      :key="item.id"
      :price="item.proprice"
      :info="item.info"
      :goodname="item.proname"
    />
  </div>
</template>

<script>
// 匯入->註冊->使用
import MyProduct from "./MyProduct.vue";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超級好吃的棒棒糖",
          proprice: 18.8,
          info: "開業大酬賓, 全場8折",
        },
        {
          id: 2,
          proname: "超級好吃的大雞腿",
          proprice: 34.2,
          info: "好吃不膩, 快來買啊",
        },
        {
          id: 3,
          proname: "超級無敵的冰激凌",
          proprice: 14.2,
          info: "炎熱的夏天, 來個冰激凌了",
        },
      ],
    };
  },
  components: { MyProduct },
};
</script>

<style>
</style>   

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h2>標題： {{ goodname }}</h2>
    <p>價格: {{ price }}元</p>
    <p>{{ info }}</p>
  </div>
</template>

<script>
export default {
  props: ["goodname", "price", "info"],
};
</script>

<style>
</style>

<template>
  <div>
    <h1>父元件</h1>
    <!-- 1.新增事件監聽 -->
    <!-- 當子元件發生了abc事件要執行fn函數 -->
    <MyCon @abc="fn" />
  </div>
</template>
<script>
// 引入子元件
import MyCon from "./MyCon.vue";
export default {
  methods: {
  // 形參接收
    fn(obj) {
      // 列印檢視有沒有獲取到
      console.log("fn發生了abc事件", obj);
    },
  },
  components: { MyCon },
};
</script>

<template>
  <div>
    <h2>子元件</h2>
    <button @click="ConFn">子傳父</button>
  </div>
</template>
<script>
export default {
  methods: {
    ConFn() {
      console.log("子元件click");
      // 2.觸發abc事件
      this.$emit("abc", { name: "吊毛譚磊" });
    },
  },
};
</script>

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h1>父元件</h1>
    <!-- 1. 父傳。自定義屬性 -->
    <!-- 新增自定義事件 -->
    <MyProduct
      v-for="(item, idx) in list"
      :idx="idx"
      :key="item.id"
      :price="item.proprice"
      :info="item.info"
      :goodname="item.proname"
      @pdd="fn"
    />
  </div>
</template>

<script>
// 匯入->註冊->使用
import MyProduct from "./MyProduct.vue";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超級好吃的棒棒糖",
          proprice: 18.8,
          info: "開業大酬賓, 全場8折",
        },
        {
          id: 2,
          proname: "超級好吃的大雞腿",
          proprice: 34.2,
          info: "好吃不膩, 快來買啊",
        },
        {
          id: 3,
          proname: "超級無敵的冰激凌",
          proprice: 14.2,
          info: "炎熱的夏天, 來個冰激凌了",
        },
      ],
    };
  },
  components: { MyProduct },
  methods: {
    fn(obj) {
      console.log("父元件,收到了pdd事件", obj);
      // 計算砍了幾元 相減  再進行重新賦值
      this.list[obj.idx].proprice -= obj.ran;
    },
  },
};
</script>

<style>
</style>

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h2>標題： {{ goodname }}</h2>
    <p>價格: {{ price }}元</p>
    <p>{{ info }}</p>
    <button @click="bargain">隨機砍價</button>
  </div>
</template>

<script>
export default {
  // 子接收
  props: ["goodname", "price", "info", "idx"],
  methods: {
    bargain() {
      // 亂數字
      const ran = Math.ceil(Math.random() * 10);
      // 觸發自定義事件
      // 為了知道具體是哪個商品要減少價格，所以要回傳idx下標
      this.$emit("pdd", { idx: this.idx, ran });
    },
  },
};
</script>

<style>
</style>