当前位置：首页 > VUE

vue组件化实现

2026-02-19 08:43:54VUE

Vue 组件化实现方法

组件定义

Vue 组件可以通过单文件组件（SFC）或全局/局部注册实现。单文件组件通常以 .vue 为后缀，包含模板、脚本和样式三部分。

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

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

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

组件注册

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

Vue.component('global-component', {
  template: '<div>全局组件</div>'
})

局部注册在组件选项的 components 属性中声明。

const LocalComponent = {
  template: '<div>局部组件</div>'
}

new Vue({
  components: {
    'local-component': LocalComponent
  }
})

Props 数据传递

父组件通过 props 向子组件传递数据，子组件需声明接收的 props。

vue组件化实现

<!-- 父组件 -->
<child-component :title="parentTitle"></child-component>

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

自定义事件通信

子组件通过 $emit 触发事件，父组件通过 v-on 监听。

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

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

插槽内容分发

使用 <slot> 实现内容分发，支持默认插槽和具名插槽。

vue组件化实现

<!-- 子组件 -->
<div>
  <slot name="header"></slot>
  <slot>默认内容</slot>
</div>

<!-- 父组件 -->
<child-component>
  <template v-slot:header>头部内容</template>
  <p>主体内容</p>
</child-component>

动态组件

通过 <component :is="currentComponent"> 实现动态切换组件。

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

生命周期管理

组件生命周期钩子可用于在不同阶段执行逻辑。

export default {
  created() {
    console.log('组件实例创建完成')
  },
  mounted() {
    console.log('DOM挂载完成')
  }
}

组件复用模式

混入（mixins）和组合式 API（Composition API）可提升复用性。

// 混入
const myMixin = {
  methods: {
    sharedMethod() {
      console.log('复用方法')
    }
  }
}

// 组合式 API
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}