vue3组件

Vue3 的组件与 Vue2 的组件基本相同，不同之处在于 Vue3 使用了 Composition API 来编写组件。

在 Vue3 中，我们可以使用 `defineComponent` 函数来定义一个组件。例如：

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  setup(props) {
    return {
      count: 0,
      increment() {
        this.count++;
      }
    }
  },
  template: `
    <div>
      <p>{{ msg }}</p>
      <p>Count: {{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `
});

在上面的代码中，我们使用 `defineComponent` 函数来定义一个名为 `MyComponent` 的组件，它有一个 `msg` 属性和一个 `count` 变量，以及一个 `increment` 方法来增加 `count` 的值。在 `setup` 函数中，我们可以使用 `props` 参数来获取组件的属性值，并且可以返回一个对象，其中包含组件中需要用到的变量和方法。

在模板中，我们可以通过 `{{ msg }}` 和 `{{ count }}` 来显示属性值和变量的值，通过 `@click` 来绑定事件。