vue3超购项目组件二次封装
时间: 2023-10-04 22:05:00 浏览: 44
Vue 3 的组件封装非常灵活,可以根据项目的需要进行二次封装。以下是一个简单的 Vue 3 组件二次封装的示例:
```javascript
<template>
<div class="my-component">
<h2>{{ title }}</h2>
<p>{{ content }}</p>
<button @click="handleClick">{{ buttonText }}</button>
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'MyComponent',
props: {
title: {
type: String,
required: true
},
content: {
type: String,
default: ''
},
buttonText: {
type: String,
default: 'Click me!'
}
},
methods: {
handleClick() {
this.$emit('click')
}
}
})
</script>
```
在上面的示例中,我们封装了一个名为 `MyComponent` 的组件。组件接受三个 props:`title`、`content` 和 `buttonText`。其中 `title` 是必传的,而 `content` 和 `buttonText` 则有默认值。组件还定义了一个 `handleClick` 方法,在点击按钮时触发 `$emit` 事件。
这个组件的封装比较简单,但是你可以根据实际需要进行更复杂的封装。例如,你可以将组件的样式、数据来源、逻辑处理等都进行封装。这样可以让组件更加易用,同时也方便维护和扩展。