当前位置：首页 > VUE

vue组件实现

2026-01-12 09:35:57VUE

Vue 组件实现

Vue 组件是 Vue.js 的核心特性之一，允许开发者将 UI 拆分为独立、可复用的模块。以下是实现 Vue 组件的几种常见方式：

单文件组件（SFC）

单文件组件是 Vue 中最常用的组件形式，将模板、逻辑和样式封装在一个 .vue 文件中。

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

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

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

全局注册组件

全局注册的组件可以在任何地方使用，通常在应用的入口文件（如 main.js）中注册。

import Vue from 'vue';
import MyComponent from './MyComponent.vue';

Vue.component('my-component', MyComponent);

局部注册组件

局部注册的组件仅在当前组件的作用域内可用。

import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}

动态组件

通过 Vue 的 <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>

函数式组件

函数式组件是无状态、无实例的组件，适合纯展示型场景。

export default {
  functional: true,
  props: ['message'],
  render(h, context) {
    return h('div', context.props.message);
  }
}

组件通信

Vue 组件通信的常见方式包括 props、事件、provide/inject 和 Vuex。

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

<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

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

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

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

Provide/Inject
跨层级组件通信，祖先组件通过 provide 提供数据，后代组件通过 inject 注入。

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

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

插槽（Slots）

插槽允许组件接收动态内容，增强组件的灵活性。

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

<!-- 父组件 -->
<child-component>
  <template v-slot:header>
    <h1>Header Content</h1>
  </template>
  <p>Default Content</p>
  <template v-slot:footer>
    <p>Footer Content</p>
  </template>
</child-component>

生命周期钩子

Vue 组件提供了一系列生命周期钩子，用于在组件不同阶段执行逻辑。

vue组件实现

export default {
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  beforeDestroy() {
    console.log('Component before destroy');
  }
}

通过以上方式，可以灵活实现 Vue 组件的开发与复用。