当前位置：首页 > VUE

vue实现组件化

2026-02-19 06:00:53VUE

Vue 组件化实现方法

Vue 的组件化是通过将 UI 拆分为独立、可复用的代码单元来实现的。以下是实现组件化的核心方法：

单文件组件（SFC）

使用 .vue 文件格式组织组件，包含模板、脚本和样式三部分：

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

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

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

组件注册

全局注册通过 Vue.component()：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

局部注册在组件选项中使用 components 属性：

export default {
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
}

Props 数据传递

父组件通过 props 向子组件传递数据：

<template>
  <child-component :title="parentTitle"></child-component>
</template>

<script>
export default {
  data() {
    return {
      parentTitle: 'From Parent'
    }
  }
}
</script>

子组件通过 props 接收：

export default {
  props: ['title'],
  // 或带类型检查
  props: {
    title: String,
    required: true
  }
}

自定义事件通信

子组件通过 $emit 触发事件：

this.$emit('update', newValue)

父组件通过 v-on 监听：

<child-component @update="handleUpdate"></child-component>

插槽内容分发

使用 <slot> 实现内容分发：

<!-- 组件定义 -->
<div class="container">
  <slot name="header"></slot>
  <slot></slot>
</div>

<!-- 组件使用 -->
<base-layout>
  <template v-slot:header>
    <h1>Header</h1>
  </template>
  <p>Main content</p>
</base-layout>

动态组件

通过 <component> 和 is 特性实现动态切换：

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

生命周期钩子

利用生命周期函数管理组件状态：

export default {
  created() {
    // 实例创建后
  },
  mounted() {
    // DOM 挂载后
  },
  destroyed() {
    // 实例销毁前
  }
}

混入（Mixins）

复用组件选项逻辑：

const myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello from mixin!')
    }
  }
}

export default {
  mixins: [myMixin]
}

组合式 API（Vue 3）

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

vue实现组件化

import { ref, computed } from 'vue'

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

    function increment() {
      count.value++
    }

    return { count, double, increment }
  }
}