count有很多种变换方式

0刷新一下变成1；
0自动变成1，2，3，……
0点加号按钮，变成50，100，150，周五才做过的
0点过两秒变成1；

刷新一下变成1，核心代码

const count = ref(0)
count.value = 1

即可

0点加号变成50
完全不会，又忘得一干二净

<template>
  <p>{{ count }}</p>
  <button>++++</button>
</template>

<script>
import { reactive, ref } from "vue";
  export default {
    name: "App",
    setup() {
      const count = ref(0)
      

      return {
        count,
      };
    },
  };

  
  </script>
  <style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

不会
想了一下，只能写成这样了
App.vue

<template>
  <test :count="add"></test>
  
</template>

<script>
import { reactive, ref } from "vue";
import Test from "./components/Test.vue"
  export default {
    name: "App",
    components: {
      Test,
    },
    setup() {
      const count = ref(0)
      const add = Num { num = count += count}

      return {
        count,
      };
    },
  };

  
  </script>
  <style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Test.vue
不记得了

App.vue写好了，但响应式没写好，Test的？再去改改看。

<template>
  <test :count="add"></test>
  
</template>

<script>
import { reactive, ref } from "vue";
import Test from "./components/Test.vue"
  export default {
    name: "App",
    components: {
      Test,
    },
    setup() {
      const count = ref(0)
      const add =  (num) => ( count.value += num );

      return {
        count,
        add,
      };
    },
  };

Test错误的

<template>
  <div>{{ count }}</div>
  <button @click="add">++++</button>
</template>

<script>
//import { watchEffect } from 'vue'
export default {
  name: "Test",
  props: {
    count: Number
  },
  setup(props) {
    console.log("props", props);
//    watchEffect(() => {
//    console.log('props.count = ', props.count)
  },
};

</script>

<template>
  <test :count="count" @add="add"></test>
  
</template>

<script>
import { ref } from "vue";
import Test from "./components/Test.vue";
  export default {
    name: "App",
    components: {
      Test,
    },
    setup() {
      const count = ref(0);
      const add =  (num) => (count.value += num);

      return {
        count,
        add,
      };
    },
  };

  
  </script>
  <style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

正确的，App.vue

<template>
  <test :count="count" @add="add"></test>
  
</template>

<script>
import { ref } from "vue";
import Test from "./components/Test.vue";
  export default {
    name: "App",
    components: {
      Test,
    },
    setup() {
      const count = ref(0);
      const add =  (num) => (count.value += num);

      return {
        count,
        add,
      };
    },
  };

  
  </script>
  <style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Test.vue

<template>
  <div>{{ count }}</div>
  <button @click="add">++++</button>
</template>

<script>
import { watchEffect } from 'vue'
export default {
  name: "Test",
  props: {
    count: Number,
    add: Function,
  },
  emits: ["add"], //为什么要跟这个，不跟会怎么样？
  setup(props,ctx) {
    const add = () => {
      ctx.emit("add", 50);
    }
    return {
      add,
    };
  },
};
//    console.log("props", props);
//    watchEffect(() => {
//    console.log('props.count = ', props.count)
 

</script>