vue中组件实现

Vue 组件实现方法

全局注册组件

通过 Vue.component() 方法全局注册组件，在任何 Vue 实例中均可使用。注册时需指定组件名称和配置对象：

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

局部注册组件

在 Vue 实例或组件的 components 选项中局部注册，仅当前作用域可用：

const MyComponent = {
  template: '<div>局部组件内容</div>'
};

new Vue({
  el: '#app',
  components: { 'my-component': MyComponent }
});

单文件组件（SFC）

使用 .vue 文件组织组件，包含模板、逻辑和样式：

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

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

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

动态组件

通过 <component :is="currentComponent"> 实现动态切换组件，需配合 keep-alive 缓存状态：

<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>

异步组件

使用 import() 语法实现按需加载，提升应用性能：

Vue.component('async-component', () => import('./AsyncComponent.vue'));

组件通信

• Props 向下传递：父组件通过属性传递数据

  <child-component :prop-name="parentData"></child-component>

• $emit 向上通知：子组件触发事件

  this.$emit('event-name', payload);

• Provide/Inject：跨层级数据传递

  provide() { return { theme: this.theme } },
  inject: ['theme']

插槽（Slots）

• 默认插槽：

  <slot>后备内容</slot>

• 具名插槽：

  <slot name="header"></slot>

• 作用域插槽：

  <slot :item="item"></slot>

渲染函数

通过 render 函数直接生成虚拟 DOM，适用于复杂动态场景：

render(h) {
  return h('div', this.$slots.default);
}