vue父子組件間怎么進(jìn)行通訊

本文小編為大家詳細(xì)介紹“vue父子組件間怎么進(jìn)行通訊”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue父子組件間怎么進(jìn)行通訊”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

如何解決組件之間通訊呢？

解決方案：

可以采用父組件傳數(shù)據(jù)給子組件，還可以子組件傳數(shù)據(jù)給父組件。簡稱父傳子，子傳父。

下面詳細(xì)說說父組件是如何將數(shù)據(jù)傳給子組件的。

父傳子

理論：如果一個(gè)組件A引入并使用了另一個(gè)組件B時(shí),那么組件A就是父組件，組件B就是子組件。

實(shí)現(xiàn)過程:

   1.在父組件中引入子組件、注冊(cè)子組件、使用子組件  
   2.在父組件中的子組件標(biāo)簽上自定義一個(gè)屬性 左邊是定義的名稱，右邊是父組件中的數(shù)據(jù) 例如
   <MyCon :list="list" />
   3.在子組件中用prpos接收父組件傳來的數(shù)據(jù) 例如：prpos:['list']  注意這里面的名稱必須要和父組件
   定義的名稱一致才能可以。

原理圖示

父組件 Footer.vue

在父組件中的子組件標(biāo)簽上自定義一個(gè)屬性

<template>
  <div>
    <h2>父組件傳子組件</h2>
    <!-- 使用組件   自定義屬性 -->
    <MyCon :name="name" :age="age" />
  </div>
</template>
<script>
// 引入組件 --> 創(chuàng)建組件 -->  使用組件
// 引入組件
import MyCon from "./MyCon.vue";
export default {
   //  創(chuàng)建組件 
  components: { MyCon },
  // 數(shù)據(jù)
  data() {
    return {
      name: "張三",
      age: 38,
    };
  },
};
</script>

子組件 MyCon.vue

在子組件中用prpos接收父組件傳來的數(shù)據(jù)

<template>
  <div>
    <h3>子組件</h3>
     // 直接在標(biāo)簽中使用
    <p>{{ name }} {{ age }}</p>
    <button @click="fn">點(diǎn)擊修改props的值</button>
  </div>
</template>
<script>
export default {
  // 子組件接收父組件傳來的數(shù)據(jù)
  props: ["name", "age"],
  methods: {
    fn() {
      this.name = "傻逼譚磊";
      this.age = 20
    },
  },
};
</script>

小案例 采用了父傳子

父組件   App.vue

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

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

<style>
</style>

子組件 MyProduct.vue

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h3>標(biāo)題： {{ goodname }}</h3>
    <p>價(jià)格: {{ price }}元</p>
    <p>{{ info }}</p>
  </div>
</template>

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

<style>
</style>

效果展示

子傳父

實(shí)現(xiàn)過程

     1.在父組件中引入子組件、注冊(cè)子組件、使用子組件  
     2.在父組件的子組件標(biāo)簽上加一個(gè)事件監(jiān)聽 例如:  <MyCon @abc="fn" />
     3.在子組件中觸發(fā)這個(gè)自定義的監(jiān)聽事件。例如:this.$emit("abc",參數(shù))

原理圖示

父組件 App.vue

在父組件的子組件標(biāo)簽上加一個(gè)事件監(jiān)聽 用形參接收數(shù)據(jù)

<template>
  <div>
    <h2>父組件</h2>
    <!-- 1.添加事件監(jiān)聽 -->
    <!-- 當(dāng)子組件發(fā)生了abc事件要執(zhí)行fn函數(shù) -->
    <MyCon @abc="fn" />
  </div>
</template>
<script>
// 引入子組件
import MyCon from "./MyCon.vue";
export default {
  methods: {
  // 形參接收
    fn(obj) {
      // 打印查看有沒有獲取到
      console.log("fn發(fā)生了abc事件", obj);
    },
  },
  components: { MyCon },
};
</script>

子組件 MyCon.vue

在子組件中觸發(fā)這個(gè)自定義的監(jiān)聽事件

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

商品案例 運(yùn)用了子傳父

父組件 App.vue

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h2>父組件</h2>
    <!-- 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>
// 導(dǎo)入->注冊(cè)->使用
import MyProduct from "./MyProduct.vue";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超級(jí)好吃的棒棒糖",
          proprice: 18.8,
          info: "開業(yè)大酬賓, 全場8折",
        },
        {
          id: 2,
          proname: "超級(jí)好吃的大雞腿",
          proprice: 34.2,
          info: "好吃不膩, 快來買啊",
        },
        {
          id: 3,
          proname: "超級(jí)無敵的冰激凌",
          proprice: 14.2,
          info: "炎熱的夏天, 來個(gè)冰激凌了",
        },
      ],
    };
  },
  components: { MyProduct },
  methods: {
    fn(obj) {
      console.log("父組件,收到了pdd事件", obj);
      // 計(jì)算砍了幾元 相減  再進(jìn)行重新賦值
      this.list[obj.idx].proprice -= obj.ran;
    },
  },
};
</script>

<style>
</style>

子組件 MyProduct.vue

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h3>標(biāo)題： {{ goodname }}</h3>
    <p>價(jià)格: {{ price }}元</p>
    <p>{{ info }}</p>
    <button @click="bargain">隨機(jī)砍價(jià)</button>
  </div>
</template>

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

<style>
</style>

效果展示

讀到這里，這篇“vue父子組件間怎么進(jìn)行通訊”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。