vue组件的实现
Vue 组件的实现方式
Vue 组件可以通过多种方式实现，以下是常见的几种方法：
单文件组件 (SFC)
使用 .vue 文件，包含模板、脚本和样式三部分：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
<style scoped>
div {
color: red;
}
</style>选项式 API 通过 JavaScript 对象定义组件：
const MyComponent = {
template: '<div>{{ message }}</div>',
data() {
return {
message: 'Hello Vue!'
}
}
}组合式 API
使用 setup 函数组织逻辑：
<script>
import { ref } from 'vue'
export default {
setup() {
const message = ref('Hello Vue!')
return { message }
}
}
</script>组件注册
全局注册 在应用实例上全局注册组件：
import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'
const app = createApp({})
app.component('my-component', MyComponent)局部注册 在组件内部局部注册：
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
}
}组件通信
Props 传递数据 父组件向子组件传递数据：
<!-- 父组件 -->
<ChildComponent :title="parentTitle" />
<!-- 子组件 -->
<script>
export default {
props: ['title']
}
</script>自定义事件 子组件向父组件发送事件：
<!-- 子组件 -->
<button @click="$emit('custom-event', payload)">Click</button>
<!-- 父组件 -->
<ChildComponent @custom-event="handleEvent" />Provide/Inject 跨层级组件通信：
// 祖先组件
export default {
provide() {
return {
sharedData: this.sharedData
}
}
}
// 后代组件
export default {
inject: ['sharedData']
}动态组件
使用 <component> 标签实现动态组件切换：
<component :is="currentComponent"></component>异步组件
通过 defineAsyncComponent 实现按需加载：
import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() =>
import('./AsyncComponent.vue')
)函数式组件
无状态组件可以通过函数定义：
function FunctionalComponent(props, { slots }) {
return h('div', props, slots.default())
}渲染函数
使用 h() 函数直接创建虚拟 DOM：
export default {
render() {
return h('div', { class: 'container' }, [
h('p', 'This is rendered content')
])
}
}以上实现方式可以根据具体需求选择，单文件组件是最常见和推荐的方式，适合大多数 Vue 应用开发场景。
