vue组件实现
Vue 组件实现
Vue 组件是 Vue.js 的核心特性之一，允许开发者将 UI 拆分为独立、可复用的模块。以下是实现 Vue 组件的几种常见方式：
单文件组件（SFC）
单文件组件是 Vue 中最常用的组件形式，将模板、逻辑和样式封装在一个 .vue 文件中。
<template>
<div class="example">
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
<style scoped>
.example {
color: red;
}
</style>全局注册组件
全局注册的组件可以在任何地方使用，通常在应用的入口文件（如 main.js）中注册。
import Vue from 'vue';
import MyComponent from './MyComponent.vue';
Vue.component('my-component', MyComponent);局部注册组件
局部注册的组件仅在当前组件的作用域内可用。
import ChildComponent from './ChildComponent.vue';
export default {
components: {
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(h, context) {
return h('div', context.props.message);
}
}组件通信
Vue 组件通信的常见方式包括 props、事件、provide/inject 和 Vuex。
-
Props 传递数据
父组件通过 props 向子组件传递数据。
<template> <child-component :message="parentMessage"></child-component> </template> <script> export default { data() { return { parentMessage: 'Hello from parent' } } } </script> -
事件触发
子组件通过$emit触发事件，父组件监听事件。<!-- 子组件 --> <button @click="$emit('custom-event', payload)">Click</button> <!-- 父组件 --> <child-component @custom-event="handleEvent"></child-component> -
Provide/Inject
跨层级组件通信，祖先组件通过provide提供数据，后代组件通过inject注入。// 祖先组件 export default { provide() { return { sharedData: this.sharedValue } } } // 后代组件 export default { inject: ['sharedData'] }
插槽（Slots）
插槽允许组件接收动态内容，增强组件的灵活性。
<!-- 子组件 -->
<template>
<div>
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
<!-- 父组件 -->
<child-component>
<template v-slot:header>
<h1>Header Content</h1>
</template>
<p>Default Content</p>
<template v-slot:footer>
<p>Footer Content</p>
</template>
</child-component>生命周期钩子
Vue 组件提供了一系列生命周期钩子，用于在组件不同阶段执行逻辑。
export default {
created() {
console.log('Component created');
},
mounted() {
console.log('Component mounted');
},
beforeDestroy() {
console.log('Component before destroy');
}
}通过以上方式，可以灵活实现 Vue 组件的开发与复用。
