vue实现组件化
Vue 组件化实现方法
组件定义
使用 .vue 单文件组件格式，包含 <template>、<script> 和 <style> 三个部分：
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello Component!'
}
}
}
</script>
<style scoped>
.example {
color: red;
}
</style>组件注册
全局注册通过 Vue.component() 实现：
import Vue from 'vue'
import MyComponent from './MyComponent.vue'
Vue.component('MyComponent', MyComponent)局部注册在父组件中完成：
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
}
}Props 数据传递
父组件向子组件传递数据：
<ChildComponent :title="parentTitle" />子组件接收 props：
export default {
props: {
title: {
type: String,
required: true
}
}
}自定义事件通信
子组件触发事件：
this.$emit('update', newValue)父组件监听事件：
<ChildComponent @update="handleUpdate" />插槽内容分发
默认插槽使用：
<!-- 子组件 -->
<slot></slot>
<!-- 父组件 -->
<ChildComponent>默认内容</ChildComponent>具名插槽实现：
<!-- 子组件 -->
<slot name="header"></slot>
<!-- 父组件 -->
<template v-slot:header>
头部内容
</template>动态组件切换
通过 :is 属性实现：
<component :is="currentComponent"></component>组件生命周期
关键生命周期钩子示例：
export default {
created() {
// 实例创建后执行
},
mounted() {
// DOM挂载后执行
},
beforeDestroy() {
// 实例销毁前清理
}
}混入复用逻辑
创建 mixin 文件：
// mixin.js
export default {
methods: {
sharedMethod() {
// 共享方法
}
}
}组件中使用：
import myMixin from './mixin'
export default {
mixins: [myMixin]
}组件间依赖注入
祖先组件提供数据：
export default {
provide() {
return {
theme: 'dark'
}
}
}后代组件注入数据：
export default {
inject: ['theme']
}
