Vue组件高级通讯之$children与$parent

<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>

<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>

<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>