Vue 组件简介与补充知识

前端

2023-09-05 19:47:17

深入理解 Vue 组件：构建可重用且可维护的应用程序

Vue 组件概述

Vue.js 中的组件是实现代码可维护性、可重用性和模块化的一种强大方式。它们允许您将应用程序分解为更小的、可重复使用的单元，这些单元可以在整个项目中共享。组件包含模板、脚本和样式，这些模板、脚本和样式封装了特定功能或 UI 元素。

非单文件组件

非单文件组件将模板、脚本和样式信息存储在不同的文件中。这种方法有利于大型项目，因为不同的团队成员可以专注于组件的不同方面。

基本使用：

创建组件： 使用 Vue.component() 方法创建组件，提供组件名称和选项对象（包括模板、脚本和样式）。
注册组件： 通过在 Vue 实例中使用 components 选项局部注册组件，或通过 Vue.component() 全局注册组件。

单文件组件

单文件组件将模板、脚本和样式信息存储在单个 .vue 文件中。这种方法简化了开发过程，便于查看和维护组件。

基本使用：

创建单文件组件： 使用 Vue CLI 或编辑器创建 .vue 文件，并编写模板、脚本和样式。
注册组件： 使用与非单文件组件相同的方法注册组件。

组件的补充知识

组件的生命周期： 组件从创建到销毁的各个阶段，包括挂载、更新和卸载。

// 生命周期钩子函数示例
export default {
  created() {
    // 组件已创建
  },
  mounted() {
    // 组件已挂载到 DOM
  },
  updated() {
    // 组件已更新
  },
  destroyed() {
    // 组件已销毁
  }
};

组件通信： 组件可以通过父子通信和兄弟组件通信相互交互。

// 父子通信
<ChildComponent :message="myMessage"></ChildComponent>

// 子组件
export default {
  props: ['message']
};

// 兄弟组件通信
import { EventBus } from '@/eventBus.js';

// 组件 A
export default {
  methods: {
    emitEvent() {
      EventBus.$emit('my-event', data);
    }
  }
};

// 组件 B
export default {
  methods: {
    listenEvent() {
      EventBus.$on('my-event', data => {
        // 处理数据
      });
    }
  }
};