vUe3组件创建与使用
时间: 2023-12-24 14:03:13 浏览: 26
在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`标签来使用这个组件了。