03 Vue怎么封装一个组件
vvEcho
2026-03-20 12:09:54
一般用props定义属性，然后emit来触发事件，在Vue3来说一般使用v-model来写，本质是props + emit 的语法糖
举例说明：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!-- 定义一个MyButton.vue -->
<template>
<button @click="handleClick">{{ text }}</button>
</template>
<script>
export default {
props: {
text: String
},
methods: {
handleClick() {
this.$emit('click')
}
}
}
</script>
<MyButton text="提交" @click="submit" />
|
总结
在 Vue 中封装组件主要是通过 props 接收外部数据，通过 emit 向外部发送事件，同时通过 slot 提高组件的灵活性。
对于需要双向绑定的场景，可以通过 v-model 实现，本质是 props 和 emit 的语法糖。
在设计组件时，我会尽量保证组件的通用性和可复用性，比如通过 props 控制行为，通过 slot 扩展内容，同时避免组件内部和业务强耦合