当前位置：首页 > VUE

Vue组件实现方法

2026-01-08 13:14:50VUE

Vue组件的基本实现方法

Vue组件是Vue.js的核心概念之一，用于构建可复用的UI模块。以下是Vue组件的几种常见实现方式：

单文件组件(SFC) 使用.vue文件格式，将模板、脚本和样式封装在一个文件中：

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

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

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

选项式API 通过JavaScript对象定义组件：

const MyComponent = {
  template: '<div>A custom component!</div>'
}

组件注册方式

全局注册 在Vue应用实例上全局注册组件：

Vue.component('my-component', {
  // 选项
})

局部注册 在父组件中局部注册：

const ComponentA = { /* ... */ }

export default {
  components: {
    'component-a': ComponentA
  }
}

组件通信方法

Props 父组件向子组件传递数据：

<!-- 父组件 -->
<child-component :message="parentMsg"></child-component>

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

自定义事件 子组件向父组件通信：

// 子组件
this.$emit('event-name', payload)

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

高级组件模式

插槽(Slot) 内容分发机制：

<!-- 父组件 -->
<navigation-link url="/profile">
  Your Profile
</navigation-link>

<!-- 子组件 -->
<a :href="url" class="nav-link">
  <slot></slot>
</a>

动态组件 根据条件切换不同组件：

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

异步组件 按需加载组件：

const AsyncComponent = () => ({
  component: import('./MyComponent.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
})

生命周期钩子

组件从创建到销毁的各个阶段可以添加自定义逻辑：

export default {
  created() {
    // 组件实例创建后执行
  },
  mounted() {
    // DOM挂载后执行
  },
  updated() {
    // 数据更新导致DOM重新渲染后执行
  },
  destroyed() {
    // 组件销毁后执行
  }
}

Vue组件实现方法