当前位置：首页 > VUE

vue实现组件封装

2026-02-11 02:13:43VUE

Vue 组件封装方法

创建组件文件

在 Vue 项目中，通常将组件放在 components 目录下。创建一个新的 .vue 文件，例如 MyComponent.vue。文件结构包含三个部分：<template>、<script> 和 <style>。

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    // 定义 props
  },
  data() {
    return {
      // 组件数据
    };
  },
  methods: {
    // 组件方法
  }
};
</script>

<style scoped>
.my-component {
  /* 组件样式 */
}
</style>

定义 Props

通过 props 实现父组件向子组件传递数据。可以指定类型、默认值和验证规则。

props: {
  title: {
    type: String,
    required: true,
    default: 'Default Title'
  },
  items: {
    type: Array,
    default: () => []
  }
}

使用插槽

插槽（Slots）允许父组件向子组件插入内容。具名插槽可以更灵活地控制内容分布。

<template>
  <div class="my-component">
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

事件通信

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

// 子组件
methods: {
  handleClick() {
    this.$emit('custom-event', payload);
  }
}

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

使用 v-model

通过 model 选项和 $emit 实现双向绑定。

model: {
  prop: 'value',
  event: 'input'
},
props: {
  value: String
},
methods: {
  updateValue(newValue) {
    this.$emit('input', newValue);
  }
}

全局注册组件

在 main.js 中全局注册组件，方便在整个项目中使用。

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

Vue.component('MyComponent', MyComponent);

局部注册组件

在需要使用的父组件中局部注册。

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

export default {
  components: {
    MyComponent
  }
};

样式封装

使用 scoped 属性限制样式作用域，避免全局污染。

<style scoped>
.my-component {
  color: red;
}
</style>

动态组件

通过 :is 动态切换组件。

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

高阶组件

通过函数或渲染函数封装可复用的逻辑。

export default function withLoading(WrappedComponent) {
  return {
    data() {
      return {
        isLoading: false
      };
    },
    render(h) {
      return h(WrappedComponent, {
        props: {
          ...this.$attrs,
          loading: this.isLoading
        }
      });
    }
  };
}

vue实现组件封装