vue实现组件
Vue 实现组件的方法
单文件组件 (SFC)
使用 .vue 文件创建组件，包含模板、脚本和样式三部分。这是 Vue 官方推荐的方式。
<template>
<div>
<h1>{{ title }}</h1>
<button @click="handleClick">Click me</button>
</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
title: {
type: String,
default: 'Default Title'
}
},
methods: {
handleClick() {
this.$emit('button-clicked');
}
}
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>全局注册组件
在 Vue 应用的入口文件（如 main.js）中全局注册组件，使其在整个应用中可用。
import Vue from 'vue';
import MyComponent from './components/MyComponent.vue';
Vue.component('my-component', MyComponent);局部注册组件
在父组件中局部注册子组件，限制子组件的作用范围。
import ChildComponent from './ChildComponent.vue';
export default {
components: {
'child-component': ChildComponent
}
}动态组件
使用 Vue 的 <component> 元素和 is 属性实现动态组件切换。
<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>函数式组件
适用于无状态、无实例的组件，性能更高。
export default {
functional: true,
props: ['message'],
render(createElement, context) {
return createElement('div', context.props.message);
}
}异步组件
通过动态导入实现组件的懒加载，优化应用性能。
const AsyncComponent = () => import('./AsyncComponent.vue');
export default {
components: {
AsyncComponent
}
}递归组件
组件可以在其模板中递归调用自身，适用于树形结构等场景。
export default {
name: 'RecursiveComponent',
props: {
item: Object
}
}在模板中：
<template>
<div>
{{ item.name }}
<recursive-component
v-if="item.children"
v-for="child in item.children"
:item="child"
/>
</div>
</template>组件通信方式
- Props 向下传递数据
- Events 向上传递消息
- Provide/Inject 跨层级数据传递
- Vuex 状态管理
- Event Bus 全局事件总线
生命周期钩子
组件实例有多个生命周期阶段，可添加自定义逻辑。
export default {
created() {
// 组件实例创建后调用
},
mounted() {
// 组件挂载到DOM后调用
},
beforeDestroy() {
// 组件销毁前调用
}
}
