vue 组件实现
Vue 组件实现方法
单文件组件 (SFC)
使用 .vue 文件格式，包含模板、脚本和样式三部分：
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello World!'
}
}
}
</script>
<style scoped>
.example {
color: red;
}
</style>选项式 API
通过对象属性定义组件行为：
export default {
props: ['title'],
data() {
return { count: 0 }
},
methods: {
increment() {
this.count++
}
}
}组合式 API
使用 setup 函数组织逻辑：
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
function increment() {
count.value++
}
return { count, increment }
}
}全局注册
在应用入口文件全局注册组件：
import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'
const app = createApp({})
app.component('MyComponent', MyComponent)局部注册
在父组件中局部注册：
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
}
}动态组件
使用 <component :is> 实现动态渲染：
<template>
<component :is="currentComponent" />
</template>异步组件
通过 defineAsyncComponent 实现懒加载：
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)组件通信
- Props 传数据：
<Child :propName="value" /> - 事件发射：
this.$emit('eventName', payload) - Provide/Inject：跨层级传递
- Vuex/Pinia：状态管理
生命周期钩子
export default {
created() {
console.log('组件创建完成')
},
mounted() {
console.log('DOM挂载完成')
}
}
