Vue 组件开发+组件库搭建+父子通信全攻略

🚀 Vue 组件开发+组件库搭建+父子通信全攻略

前端开发，Vue 绝对是主力框架之一！
想要写好 Vue 项目，学会封装组件是基本功，搞清父子通信、搭建自己的组件库，开发效率直接起飞！

今天这篇，手把手带你搞定 👇

---

📌 一、Vue 组件开发入门

✳️ 什么是 Vue 组件？

简单来说，组件就是可复用的独立功能块，比如按钮、弹窗、表单、轮播图。

好处：

• 结构清晰
• 复用方便
• 解耦维护

---

✳️ 核心组成

• props 👉 接收参数
• methods 👉 定义方法
• emit 👉 派发事件
• slot 👉 插槽
• scoped 👉 样式隔离

---

✳️ 实战：封装一个按钮组件 MyButton.vue

<template>
  <button @click="handleClick" :class="type">
    <slot>默认按钮</slot>
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    type: {
      type: String,
      default: 'primary'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
.primary {
  background-color: #409eff;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
}
</style>