vue父组件调子组件方法，状态更新了，但是没应用

Question

//子组件
<template>
  <section v-show="bool">11</section>
</template>
<script>
export default {
  data() {
    return {
      bool: false
    };
  },
  mounted() {
  },
  methods: {
    aaa() {
      let that = this;
      that.bool = true;
      console.log(that.bool);
      setTimeout(() => {
        that.bool = false;
        console.log(that.bool);
      }, 2000);
    }
  }
};
</script>

---

//父组件
<template>
  <section>
      <zujian></zujian>
  </section>
</template>
<script>
import zujian from "@/components/zujian";
export default {
  data() {
  },
  mounted() {
    zujian.methods.aaa();
  },
  components: {
    zujian
  }
};
</script>

父组件调用以后，子组件的两次console正确，但是子组件的状态并没有发生改变，求解。

Answer 1

自问自答
以refs的形式去调

//父组件
<template>
  <section>
      <zujian ref="zujian"></zujian>
  </section>
</template>
<script>
import zujian from "@/components/zujian";
export default {
  data() {
  },
  mounted() {
    this.$refs.zujian.aaa();
  },
  components: {
    zujian
  }
};
</script>

Answer 2

父组件可以控制子组件，但是子组件不能控制父组件的参数，如果你要关闭显示，在你的子组件上写上方法回调，在你的父组件里更改状态

Answer 3

this.$children[0].aaa();