W250913/20.vue3/project3/src/views/Refs-Parent/Father.vue

<template>
  <div>
    <h1 class="h-26 text-6xl">$refs-$parent</h1>
    <p>我有{{ num }}辆车</p>
    <button @click="changeBook">修改书本数量</button>
    <hr class="h-15" />
    <button @click="changeFlower">修改花朵数量</button>
    <hr class="h-15" />
    <button @click="changeMoney($refs)">同时修改</button>
    <h3 class="h-16 text-4xl"></h3>
    <h3 class="h-16 text-4xl"></h3>
    <hr class="h-15" />
    <hr class="h-15" />
    <Child1 ref="a1"></Child1>
    <hr class="h-15" />
    <hr class="h-15" />
    <Child2 ref="a2"></Child2>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";
let a1 = ref();
let a2 = ref();
let num = ref(10);
// console.log(a1, "a1");
function changeBook() {
  a1.value.book += 1;
}
function changeFlower() {
  a2.value.flower += 2;
}
function changeMoney(val: { [propsName: string]: any }) {
  console.log(val);
  for (let key in val) {
    val[key].money -= 1000;
  }
}
defineExpose({ num });
</script>

<style lang="scss" scoped>
</style>