Vue组件的创建和使用

在Vue3中，可以使用`defineComponent`方法来创建组件，示例如下： ```vue <template> <div> <h1>{{ title }}</h1> <p>{{ content }}</p> </div> </template> <script> import { defineComponent } from 'vue' export default defineComponent({ props: { title: { type: String, required: true }, content: { type: String, required: true } } }) </script> ``` 在上面的示例中，我们使用`defineComponent`方法来定义一个组件，并且在`props`中定义了`title`和`content`两个属性。这个组件可以接收一个`title`和一个`content`属性，并且必须传入这两个属性。 然后，我们可以像使用普通的HTML标签一样，在其他地方使用这个组件，示例如下： ```vue <template> <div> <my-component title="Hello" content="World"></my-component> </div> </template> <script> import MyComponent from './MyComponent.vue' export default { components: { MyComponent } } </script> ``` 在上面的示例中，我们通过`components`属性将`MyComponent`组件注册到了当前组件中，然后就可以在模板中使用`my-component`标签来使用这个组件了。