Vue組件高級通訊之$children與$parent

更新時間：2023年06月25日 14:59:06 作者：扶得一人醉如蘇沐晨

這篇文章主要為大家介紹了Vue組件高級通訊之$children與$parent，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

一、$children組件屬性

官方介紹：當前實例的直接子組件。需要注意 $children 并不保證順序，也不是響應式的。

即$children是組件自帶的屬性，它可以獲取到當前組件的子組件，并以數組的形式返回。

二、$parent

官方介紹：指定已創(chuàng)建的實例之父實例，在兩者之間建立父子關系。子實例可以用 this.$parent 訪問父實例，子實例被推入父實例的 $children 數組中。

如果組件沒有父組件，他的$parent為undefined，App組件(根組件)的$parent不是undefined，也不是App本身。

如果組件有多個父親，但是$parent只能找到一個，不知道是不是bug，建議慎用。

注意：節(jié)制地使用$parent 和 $children它們的主要目的是作為訪問組件的應急方法。更推薦用 props 和 events 實現父子組件通信。

三、小例子：通過借錢案例加深理解

Father.vue

<template>
  <div>
    <h2>父親金錢:{{ fatherMoney }}</h2>
    <button @click="jieqian">問子女借錢100元</button>
    <Son></Son>
    <Daughter></Daughter>
  </div>
</template>
<script>
import Son from "./Son";
import Daughter from "./Daughter";
export default {
  components: {
    Son,
    Daughter,
  },
  data() {
    return {
      fatherMoney: 0,
    };
  },
  methods: {
    jieqian() {
      this.fatherMoney += 100 * 2;
      this.$children.forEach((dom) => {
        dom.childrenMoney -= 100;
      });
    },
  },
};
</script>
<style></style>

Son

<template>
  <div style="background-color: #999">
    <h2>兒子金錢:{{ childrenMoney }}</h2>
    <button @click="giveFatherMoney(100)">給父親100</button>
  </div>
</template>
<script>
export default {
  name: "Son",
  data() {
    return {
      childrenMoney : 20000,
    };
  },
  methods: {
    giveFatherMoney(money) {
      this.$parent.fatherMoney += money;
      this.childrenMoney -= money;
    },
  },
};
</script>
<style>
</style>

Daughter

<template>
  <div style="background-color: #999">
    <h2>女兒金錢:{{ childrenMoney }}</h2>
    <button @click="giveFatherMoney(100)">給父親100</button>
  </div>
</template>
<script>
export default {
  name: "Daughter",
  data() {
    return {
      childrenMoney : 20000,
    };
  },
  methods: {
    giveFatherMoney(money) {
      this.$parent.fatherMoney += money;
      this.childrenMoney -= money;
    },
  },
};
</script>
<style>
</style>

以上就是Vue組件高級通訊之$children與$parent的詳細內容，更多關于Vue組件通訊$children $parent的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: