### 可复用的 Vue 组件的定义
可复用的 Vue 组件是指那些在
项目中可以多次使用，具备独立功能和样式的代码模块。将某个功能封装成可复用组件后，能在不同的页面和组件中方便地使用该功能，有助于提高
项目的开发效率和代码质量，让前端代码的结构更加清晰和易于维护。例如，在 Vue
3 中封装可复用的复制组件，实现了代码的复用，可在不同场景下使用复制功能，还能根据具体业务需求对组件进行进一步的优化和扩展，如添加更多的提示信息、支持更多的复制触发方式等[^
2]。
### 将组件封装成独立 Vue 组件的方法
- **创建组件文件**：创建一个新的 `.vue` 文件来定义组件。该文件通常包含 `<template>`、`<script>` 和 `<style>` 三个部分。`<template>` 用于编写组件的 HTML 结构，`<script>` 用于编写组件的 JavaScript 逻辑，`<style>` 用于编写组件的 CSS 样式。示例如下：
```vue
<template>
<div>
<!-- 组件的 HTML 结构 -->
<button @click="handleClick">点击我</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
// 处理点击事件的逻辑
console.log(&#
39;按钮被点击了&#
39;);
}
}
}
</script>
<style scoped>
button {
background-color: blue;
color: white;
}
</style>
```
- **注册组件**：组件可以全局注册或者局部注册。全局注册后，组件可以在整个
项目的任何地方使用；局部注册则只能在注册该组件的父组件中使用。
- **全局注册**：在
项目的入口文件（通常是 `main.js`）中使用 `app.component()` 方法进行全局注册。
```javascript
import { createApp } from &#
39;vue&#
39;;
import App from &#
39;./App.vue&#
39;;
import MyComponent from &#
39;./components/MyComponent.vue&#
39;;
const app = createApp(App);
app.component(&#
39;my-component&#
39;, MyComponent);
app.mount(&#
39;#app&#
39;);
```
- **局部注册**：在父组件的 `<script>` 部分使用 `components` 选项进行局部注册。
```vue
<template>
<div>
<my-component></my-component>
</div>
</template>
<script>
import MyComponent from &#
39;./components/MyComponent.vue&#
39;;
export default {
components: {
&#
39;my-component&#
39;: MyComponent
}
}
</script>
```
- **使用组件**：一旦组件被注册，就可以在父组件的模板中通过标签的形式使用它。例如，在上述局部注册的示例中，在父组件的 `<template>` 中使用 `<my-component></my-component>` 来使用该组件[^
1]。
- **传递属性和事件**：可以向组件传递属性和监听组件触发的事件。通过 `props` 向组件传递数据，通过 `$emit` 触发自定义事件。
- **传递属性**：在父组件中使用 `:` 或 `v-bind` 绑定属性，在子组件中使用 `props` 接收属性。
```vue
<!-- 父组件 -->
<template>
<div>
<my-component :message="parentMessage"></my-component>
</div>
</template>
<script>
import MyComponent from &#
39;./components/MyComponent.vue&#
39;;
export default {
components: {
&#
39;my-component&#
39;: MyComponent
},
data() {
return {
parentMessage: &#
39;这是父组件传递的消息&#
39;
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
props: [&#
39;message&#
39;]
}
</script>
```
- **监听事件**：在父组件中使用 `@` 或 `v-on` 监听子组件触发的事件，在子组件中使用 `$emit` 触发自定义事件。
```vue
<!-- 父组件 -->
<template>
<div>
<my-component @child-event="handleChildEvent"></my-component>
</div>
</template>
<script>
import MyComponent from &#
39;./components/MyComponent.vue&#
39;;
export default {
components: {
&#
39;my-component&#
39;: MyComponent
},
methods: {
handleChildEvent() {
console.log(&#
39;子组件触发了事件&#
39;);
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<button @click="triggerEvent">触发事件</button>
</div>
</template>
<script>
export default {
methods: {
triggerEvent() {
this.$emit(&#
39;child-event&#
39;);
}
}
}
</script>
```
扫一扫
2547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
