当前位置：首页 > VUE

vue组件化实现

2026-01-18 16:21:46VUE

Vue 组件化实现

Vue 的组件化是将 UI 拆分为独立、可复用的模块，每个模块封装自己的逻辑和样式。以下是实现 Vue 组件化的核心方法：

组件定义

使用 .vue 单文件组件（SFC）是最常见的方式，包含模板、脚本和样式三部分：

<template>
  <div class="example">{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<style scoped>
.example {
  color: red;
}
</style>

组件注册

全局注册通过 Vue.component，适用于高频复用组件：

import MyComponent from './MyComponent.vue';
Vue.component('my-component', MyComponent);

局部注册在组件选项中通过 components 属性：

export default {
  components: {
    'my-component': MyComponent
  }
}

组件通信

父传子通过 props：

<!-- 父组件 -->
<child-component :propName="parentData"></child-component>

<!-- 子组件 -->
<script>
export default {
  props: ['propName']
}
</script>

子传父通过 $emit 触发自定义事件：

<!-- 子组件 -->
<button @click="$emit('custom-event', payload)">Click</button>

<!-- 父组件 -->
<child-component @custom-event="handleEvent"></child-component>

跨级组件通信可使用 provide/inject：

// 祖先组件
export default {
  provide() {
    return {
      sharedData: this.data
    }
  }
}

// 后代组件
export default {
  inject: ['sharedData']
}

动态组件

通过 <component :is> 实现动态渲染：

<component :is="currentComponent"></component>

插槽（Slot）

默认插槽：

<!-- 子组件 -->
<slot>Fallback Content</slot>

<!-- 父组件 -->
<child-component>Custom Content</child-component>

具名插槽：

<!-- 子组件 -->
<slot name="header"></slot>

<!-- 父组件 -->
<template v-slot:header>Header Content</template>

作用域插槽允许子组件向插槽传递数据：

<!-- 子组件 -->
<slot :user="userData"></slot>

<!-- 父组件 -->
<template v-slot:default="slotProps">{{ slotProps.user.name }}</template>

生命周期钩子

关键生命周期方法包括：

created：实例创建后
mounted：DOM 挂载后
updated：数据更新后
destroyed：实例销毁后

组合式 API（Vue 3）

使用 setup() 函数组织逻辑：

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);

    return { count, double };
  }
}
</script>