vue实现组件

Vue 实现组件的方法

单文件组件（SFC）

使用 .vue 文件格式，包含 <template>、<script> 和 <style> 三个部分，是 Vue 官方推荐的组件开发方式。

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

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

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

选项式 API

通过 Vue.component() 全局注册或组件选项对象局部注册，适合 Vue 2 或偏好选项式开发的场景。

// 全局组件
Vue.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: '<button @click="count++">Clicked {{ count }} times</button>'
})

// 局部组件
const ComponentA = {
  template: '<div>Component A</div>'
}
new Vue({
  components: {
    'component-a': ComponentA
  }
})

组合式 API（Vue 3）

使用 setup() 函数和响应式 API（如 ref、reactive），更适合复杂逻辑的封装和复用。

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">Count: {{ count }}</button>
</template>

函数式组件

无状态、无实例的轻量级组件，通过渲染函数实现，适用于纯展示型场景。

Vue.component('functional-button', {
  functional: true,
  render(createElement, context) {
    return createElement('button', context.data, context.children)
  }
})

动态组件

通过 <component :is> 实现运行时动态切换组件，常用于标签页或条件渲染。

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

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: { ComponentA, ComponentB }
}
</script>

异步组件

使用 defineAsyncComponent 或动态 import() 实现按需加载，优化应用性能。

// Vue 3
const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)

// Vue 2
Vue.component('async-component', () => import('./AsyncComponent.vue'))

递归组件

组件调用自身时需要设置 name 选项，适用于树形结构等嵌套场景。

<template>
  <div>
    {{ data.name }}
    <tree-item v-for="child in data.children" :data="child" :key="child.id"/>
  </div>
</template>

<script>
export default {
  name: 'TreeItem',
  props: ['data']
}
</script>

组件通信方式

• Props / Events：父子组件通过 props 向下传递数据，通过 $emit 向上触发事件
• Provide / Inject：祖先组件向后代组件跨层级提供数据
• Vuex / Pinia：状态管理库解决复杂组件通信
• Event Bus：通过空的 Vue 实例作为事件中心（小型项目适用）
• $attrs / $listeners：处理非 props 的特性和事件（Vue 2）
• v-model 双向绑定：通过 modelValue prop 和 update:modelValue 事件实现

生命周期钩子

组件在不同阶段会触发特定钩子，可用于执行初始化或清理操作：

• beforeCreate / created
• beforeMount / mounted
• beforeUpdate / updated
• beforeUnmount / unmounted（Vue 3）
• errorCaptured

最佳实践

• 组件命名采用 PascalCase（单文件组件）或 kebab-case（DOM 模板）
• 单一职责原则，保持组件功能聚焦
• 合理划分容器组件与展示组件
• Prop 定义时指定类型和默认值
• 为列表渲染的组件设置唯一 key
• 复杂逻辑考虑使用自定义 Hook（Vue 3）或 Mixin（Vue 2）