vue3用组件实现计数器

Vue3中，你可以通过创建一个简单的计数器组件来实现功能。计数器通常包含两个部分：一个状态变量用于存储当前的计数值，以及一个模板来展示这个值并提供一个按钮来进行增减操作。以下是一个基础的计数器组件示例：

<template>
  <div>
    <button @click="increment">增加</button>
    <p>计数器: {{ count }}</p>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      if (this.count > 0) {
        this.count--;
      }
    },
  },
};
</script>

在这个例子中，`data()`函数用于初始化组件的状态，`count`就是我们的计数器变量。`methods`对象定义了两个处理用户交互的方法：`increment()`负责增加计数，`decrement()`负责减少计数（这里设置了一个检查，避免计数变为负数）。

为了在父组件中使用这个计数器，只需导入并作为子组件引用即可：

<template>
  <div>
    <my-counter />
  </div>
</template>

<script>
import MyCounter from './MyCounter.vue';

export default {
  components: {
    MyCounter,
  },
};
</script>