vue基础组件实现
Vue 基础组件实现
组件定义
使用 Vue.component 全局注册或局部注册组件。全局注册适合通用组件，局部注册适合特定页面使用的组件。
// 全局注册
Vue.component('my-component', {
template: '<div>基础组件内容</div>'
});
// 局部注册
const MyComponent = {
template: '<div>局部组件内容</div>'
};
new Vue({
el: '#app',
components: { MyComponent }
});模板语法
组件模板支持 HTML 和 Vue 指令（如 v-if、v-for）。单文件组件（.vue 文件）需配合构建工具使用。
<template>
<div>
<p v-if="showText">{{ message }}</p>
<button @click="toggleText">切换显示</button>
</div>
</template>Props 数据传递
父组件通过 props 向子组件传递数据。使用 v-bind 动态传递或直接传递静态值。
// 子组件定义
Vue.component('child-component', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
});
// 父组件使用
<child-component title="动态标题" :dynamic-title="parentData"></child-component>事件通信
子组件通过 $emit 触发事件，父组件通过 v-on 监听。
// 子组件触发事件
this.$emit('custom-event', eventData);
// 父组件监听
<child-component @custom-event="handleEvent"></child-component>插槽内容分发
使用 <slot> 实现内容分发，支持默认插槽和命名插槽。
<!-- 子组件 -->
<div>
<slot name="header"></slot>
<slot>默认内容</slot>
</div>
<!-- 父组件 -->
<child-component>
<template v-slot:header><h1>标题</h1></template>
<p>主内容</p>
</child-component>生命周期钩子
在组件不同阶段执行逻辑，如 created、mounted。
Vue.component('lifecycle-demo', {
created() {
console.log('组件实例创建完成');
},
mounted() {
console.log('DOM 挂载完成');
}
});样式与作用域
单文件组件中可通过 <style scoped> 限制样式作用域。
<style scoped>
.button {
color: red; /* 仅作用于当前组件 */
}
</style>动态组件
使用 <component :is="currentComponent"> 实现动态切换组件。
<component :is="tabComponent"></component>注意事项
- 组件命名建议使用 kebab-case（如
my-component）。 - 避免直接修改
props，如需修改应使用本地data或计算属性。 - 复杂状态管理建议配合 Vuex 使用。
