当前位置：首页 > article >正文

Vue.js 组件化开发：从入门到进阶

article 2024/10/22 19:53:47

Vue.js 组件化开发：从入门到进阶

👋 大家好，今天我们来聊一聊 Vue.js 的 “组件化开发”。目前 Vue 开发已经相对成熟了，相信很多朋友对组件化开发并不陌生。

如果你对组件化开发已经非常熟悉，看到我的文章，欢迎点个👍 支持一下。
如果你是刚入门，我强烈建议学习一下哦💪。
如果你想巩固 Vue 组件化的知识，非常推荐来学习📚。

一、什么是组件化开发？

在进入正题之前，想问大家一个问题：你有没有拼过乐高🧱？如果有的话，你就会知道，每一块乐高积木都可以单独使用，但更妙的是，它们能组合成更大、更复杂的东西🏗️。Vue.js 的 “组件化开发” 就是类似的概念。

1.1 组件是什么？

用最简单的话来说，组件就是一个小的独立功能块🧩。你可以把它理解成一块"小积木"，每个组件都有自己的功能，并且可以重复利用🔁。

比如你在开发一个网站🌐，这个网站有很多按钮🔘，而这些按钮长得都差不多、功能也类似，那我们完全可以把它们做成一个 “按钮组件”，然后在需要用到按钮的地方直接调用这个组件，像拼乐高一样把它们组装起来🤹‍♂️。

1.2 为什么要组件化？

有人可能会问：“为啥要这么麻烦😅？直接写 HTML 和 JavaScript 不行吗？” 其实，组件化的好处非常多，比如：

重复利用🔄：写一次，用无数次，节省开发时间⏱️。
代码清晰🧹：把复杂的页面拆分成多个小组件，每个组件只负责自己的事情，让代码更好管理🗂️。
方便维护🔧：如果按钮的样式要改，只需要改一次，所有用到这个组件的地方都会同步更新，省时省力💪。

二、用 Vue.js 来创建一个简单的组件

讲了这么多理论📖，咱们来实际操作一下。Vue.js 里创建组件非常简单，下面就给大家举个例子🌰：

2.1 创建一个简单的按钮组件

我们来写一个最简单的按钮组件吧，叫它 <my-button>。假设我们要实现一个蓝色按钮🔵，上面写着"点击我👆"。

<template>
  <button class="my-button" @click="handleClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    text: {
      type: String,
      default: '点击我'
    }
  },
  methods: {
    handleClick() {
      alert('按钮被点击了！🎉');
    }
  }
};
</script>

<style scoped>
.my-button {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}
</style>

2.2 使用这个组件

在创建好 <my-button> 组件之后，我们就可以在别的地方用它了，就像拼乐高一样把它插到合适的地方🧩。

<template>
  <div>
    <my-button text="点我一下"></my-button>
    <my-button text="再点我一下"></my-button>
  </div>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  components: {
    MyButton
  }
};
</script>

这样，我们就能在页面上看到两个按钮，并且它们是完全独立的，每个按钮点击都会弹出提示框📦。

三、组件间通信：让组件 “聊起来”

当我们的项目越来越复杂，组件也会越来越多，它们之间可能还需要互相交流🗣️，像是"兄弟之间的对话"、"父子之间的对话"👨‍👩‍👧‍👦。

3.1 父组件和子组件

在 Vue.js 中，最常见的就是父组件和子组件之间的通信。父组件可以通过 props 向子组件传递数据📨，而子组件可以通过事件向父组件发送消息📤。

3.1.1 父组件传数据给子组件

我们之前的例子里，<my-button> 组件通过 props 接收了一个 text，这就是父组件传数据给子组件的方式📩。

3.1.2 子组件给父组件发消息

如果子组件想告诉父组件一些事情，比如按钮被点击了🔔，我们可以使用事件。

<template>
  <button @click="$emit('button-clicked')">
    {{ text }}
  </button>
</template>

在父组件中，我们可以监听这个事件：

<template>
  <div>
    <my-button @button-clicked="handleButtonClick"></my-button>
  </div>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  components: {
    MyButton
  },
  methods: {
    handleButtonClick() {
      console.log('子组件按钮被点击了！🖱️');
    }
  }
};
</script>

这样，父组件就能知道子组件发生了什么事情，并作出相应的反应🔄。