Vue.js 组件开发是构建用户界面时的核心技能之一。
整理点信息蹭蹭热度。
什么是组件？
在 Vue.js 中，组件是构成使用者介面的独立且可重复使用的程式码区块。它们允许你将复杂的介面分解成更小、更易于管理的部分。每个组件都有自己的模板（template）、逻辑（script）和样式（style），使其具有高度的封装性。
一个 Vue.js 组件通常包含以下三个部分
- Template（模板）： 定义组件的 HTML 结构。
- Script（脚本）： 包含组件的 JavaScript 逻辑，例如资料、方法和生命周期钩子。
- Style（样式）： 定义组件的 CSS 样式。
1.创建基础组件
基础组件示例
<template>
<div class="my-component">
<h1>{
{ title }}</h1>
<p>{
{ message }}</p>
</div>
</template>
<script>
export default {
name: "MyComponent",
props: {
title: {
type: String,
required: true,
},
message: {
type: String,
default: "This is a default message.",
},
},
};
</script>
<style scoped>
.my-component {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
</style>
2.组件间通信
父子通信
父组件向子组件传递数据：使用 props。
<template>
<div>
<ChildComponent :title="title" :message="message" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
title: "Hello World",
message: "This is a child component.",
};
},
};
</script>
子组件向父组件发送事件：使用 $emit。
// 子组件
<template>
<button @click="$emit('increment')">Click Me</button>
</template>
// 父组件
<template>
<div>
<ChildComponent @increment="count++" />
<p>Count: {
{ count }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
count: 0,
};
},
};
</script>
兄弟组件通信
使用 Event Bus 或 Vuex/Pinia 管理状态。
3.动态组件
动态加载不同组件：
<template>
<component :is="currentComponent"></component>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
data() {
return {
currentComponent: 'ComponentA',
};
},
components: {
ComponentA,
ComponentB,
},
};
</script>
4.插槽 (Slots)
默认插槽
<template>
<div>
<slot>Default Content</slot>
</div>
</template>
使用：
<MyComponent>
<p>This is passed as slot content.</p>
</MyComponent>
具名插槽
<template>
<div>
<slot name="header"></slot>
<slot></slot>
</div>
</template>
使用：
<MyComponent>
<template #header>
<h1>Header Content</h1>
</template>
<p>Default slot content</p>
</MyComponent>
5.高级特性
自定义指令
Vue.directive('focus', {
inserted(el) {
el.focus();
},
});
在组件中使用：
<input v-focus />
混入 (Mixin)
// mixins/logger.js
export default {
created() {
console.log(`${this.$options.name} created`);
},
};
在组件中引入：
<script>
import logger from './mixins/logger';
export default {
mixins: [logger],
name: 'MyComponent',
};
</script>
Composition API
使用 Vue 3 的 Composition API 来定义组件逻辑：
<template>
<div>{
{ count }}</div>
<button @click="increment">Increment</button>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
},
};
</script>
6.组件优化
按需加载
使用动态 import：
export default {
components: {
AsyncComponent: () => import('./AsyncComponent.vue'),
},
};
性能优化
- 使用
v-once静态内容只渲染一次。 - 使用
computed替代复杂的模板逻辑。 - 使用
key正确管理动态列表。