当前位置：首页 > VUE

vue如何实现组件封装

2026-02-21 03:37:14VUE

Vue 组件封装实现方法

封装组件的基本步骤
创建一个 .vue 文件，包含 <template>、<script> 和 <style> 三个部分。通过 props 接收父组件传递的数据，通过 $emit 触发事件向父组件通信。

<template>
  <div class="custom-component">
    <button @click="handleClick">{{ buttonText }}</button>
  </div>
</template>

<script>
export default {
  name: 'CustomButton',
  props: {
    buttonText: {
      type: String,
      default: 'Click Me'
    }
  },
  methods: {
    handleClick() {
      this.$emit('button-clicked');
    }
  }
};
</script>

<style scoped>
.custom-component {
  display: inline-block;
}
</style>

使用插槽增强灵活性
通过 <slot> 允许父组件插入自定义内容，支持默认插槽和具名插槽。

vue如何实现组件封装

<template>
  <div class="card">
    <header v-if="$slots.header">
      <slot name="header"></slot>
    </header>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

通过 v-model 实现双向绑定
自定义组件可以通过 model 选项和 $emit('input') 实现类似原生表单元素的行为。

<template>
  <input 
    :value="value" 
    @input="$emit('input', $event.target.value)"
  />
</template>

<script>
export default {
  name: 'CustomInput',
  props: ['value']
};
</script>

使用 Provide/Inject 跨层级通信
对于深层嵌套的组件，可以通过 provide 和 inject 避免逐层传递 props。

vue如何实现组件封装

<script>
export default {
  provide() {
    return {
      theme: this.theme
    };
  },
  data() {
    return {
      theme: 'dark'
    };
  }
};
</script>

<!-- 子组件 -->
<script>
export default {
  inject: ['theme'],
  created() {
    console.log(this.theme); // 'dark'
  }
};
</script>

封装高阶组件
通过渲染函数或 extends 实现更复杂的逻辑复用。

<script>
import BaseComponent from './BaseComponent.vue';

export default {
  extends: BaseComponent,
  methods: {
    extendedMethod() {
      // 扩展基础组件功能
    }
  }
};
</script>

注意事项