vue中组件实现

Vue 组件实现方法

在 Vue 中，组件是构建用户界面的核心单元，支持复用和模块化开发。以下是实现组件的几种常见方式：

全局注册组件

通过 Vue.component 方法全局注册组件，可在任意 Vue 实例中使用：

Vue.component('my-component', {
  template: '<div>全局组件内容</div>'
});

局部注册组件

在 Vue 实例的 components 选项中局部注册组件，仅限当前实例使用：

new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: '<div>局部组件内容</div>'
    }
  }
});

单文件组件（SFC）

使用 .vue 文件将模板、逻辑和样式封装为独立模块，需配合构建工具（如 Webpack）：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return { message: '单文件组件示例' };
  }
};
</script>

<style scoped>
div { color: blue; }
</style>

动态组件

通过 :is 动态切换组件，适合需根据条件渲染不同组件的场景：

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

函数式组件

无状态、无实例的组件，适用于纯渲染场景，性能更高：

Vue.component('functional-comp', {
  functional: true,
  render(h, context) {
    return h('div', context.props.text);
  },
  props: ['text']
});

组件通信方式

Props 传递数据

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

// 子组件
props: ['title'],
template: '<div>{{ title }}</div>'

// 父组件
<child-component title="来自父组件的数据"></child-component>

自定义事件

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

// 子组件
this.$emit('update', newValue);

// 父组件
<child-component @update="handleUpdate"></child-component>

使用 Vuex

复杂应用推荐使用 Vuex 进行状态管理，实现跨组件数据共享：

// 组件中访问状态
this.$store.state.count;

// 组件中提交变更
this.$store.commit('increment');

Provide/Inject

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

// 祖先组件
provide() {
  return { theme: 'dark' };
}

// 后代组件
inject: ['theme'],
template: '<div :class="theme">主题</div>'

组件生命周期

组件从创建到销毁会触发以下钩子函数，可按需覆盖：

export default {
  created() {
    console.log('组件实例已创建');
  },
  mounted() {
    console.log('DOM 挂载完成');
  },
  beforeDestroy() {
    console.log('组件销毁前');
  }
};

组件插槽

通过插槽实现内容分发，增强组件灵活性：

默认插槽

<!-- 组件定义 -->
<template>
  <div><slot>默认内容</slot></div>
</template>

<!-- 使用 -->
<my-component>替换默认内容</my-component>

具名插槽

<!-- 组件定义 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

<!-- 使用 -->
<my-component>
  <template v-slot:header>标题</template>
  主要内容
</my-component>

作用域插槽

<!-- 组件定义 -->
<template>
  <div>
    <slot :user="user">{{ user.name }}</slot>
  </div>
</template>

<!-- 使用 -->
<my-component>
  <template v-slot:default="slotProps">
    {{ slotProps.user.age }}
  </template>
</my-component>