用vue3的组件写一个：用户输入两个数，计算两个数的和并计算

好的，以下是一个用 Vue 3 写的计算器组件，可以让用户输入两个数字并计算它们的和：

<template>
  <div class="calculator">
    <h2>计算器</h2>
    <div>
      <label>第一个数字：</label>
      <input v-model.number="num1" type="number">
    </div>
    <div>
      <label>第二个数字：</label>
      <input v-model.number="num2" type="number">
    </div>
    <div>
      <button @click="calculate">计算</button>
    </div>
    <div>
      <p>计算结果为: {{ result }}</p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'Calculator',
  setup() {
    const num1 = ref(0);
    const num2 = ref(0);
    const result = ref(0);

    const calculate = () => {
      result.value = num1.value + num2.value;
    };

    return {
      num1,
      num2,
      result,
      calculate,
    };
  },
};
</script>

<style>
.calculator {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}
</style>

这个组件包含了一个 `num1` 和 `num2` 变量来存储用户输入的数字，以及一个 `result` 变量来存储计算结果。它还定义了一个 `calculate` 方法来执行计算，并在模板中使用 `v-model` 指令将输入框与变量关联起来。最后，在模板中使用插值语法来显示计算结果。

你可以将这个组件放在一个 Vue 应用程序中，并在需要的地方使用它。例如，你可以在 `App.vue` 文件中添加以下代码来使用这个组件：

<template>
  <div>
    <Calculator />
  </div>
</template>

<script>
import Calculator from './components/Calculator.vue';

export default {
  name: 'App',
  components: {
    Calculator,
  },
};
</script>

注意，为了在应用程序中使用这个组件，你需要在 `setup()` 函数中使用 Vue 3 提供的 `ref` 函数来创建响应式变量。这个函数接收一个初始值，并返回一个包装了这个值的响应式对象。这个对象有一个 `value` 属性，可以用来读取和修改变量的值。