Vue 组件

Vue 组件是 Vue.js 应用程序的核心构建块，它们允许您将应用拆分为独立的、可复用的部分。每个组件都有自己的模板、逻辑和样式，这使得代码更加模块化且易于维护。以下是关于 Vue 组件的详细介绍，包括如何创建、注册和使用组件。

1.创建组件

单文件组件（SFC）

最常用的方式是通过单文件组件（.vue 文件）来定义组件。一个 .vue 文件通常包含 <template>、<script> 和 <style> 三个部分：

<!-- MyComponent.vue -->
<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    name: "MyComponent",
    props: {
      title: String,
      message: String,
    },
  };
</script>

<style scoped>
  .my-component {
    border: 1px solid #ccc;
    padding: 16px;
    margin-bottom: 16px;
  }
</style>

JavaScript 对象形式

也可以直接在 JavaScript 中以对象的形式定义组件：

const MyComponent = {
  name: "MyComponent",
  props: ["title", "message"],
  template: `
    <div class="my-component">
      <h1>{{ title }}</h1>
      <p>{{ message }}</p>
    </div>
  `,
};

2.注册组件

组件必须先注册才能使用。有两种主要的注册方式：全局注册和局部注册。

全局注册

全局注册的组件可以在任何地方使用，无需再次导入或声明。

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

const app = createApp(App);
app.component("MyComponent", MyComponent);
app.mount("#app");

局部注册

局部注册的组件只能在其被定义的作用域内使用，例如在一个特定的父组件中。

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

export default {
  components: {
    MyComponent,
  },
};

3.使用组件

一旦组件被注册，就可以在模板中像普通 HTML 标签一样使用它。

<template>
  <div id="app">
    <my-component title="Hello" message="This is a message"></my-component>
  </div>
</template>

4.组件通信

组件之间可以通过多种方式通信，包括属性 (props)、事件 (events)、插槽 (slots) 和依赖注入 (provide/inject)。

Props (父 -> 子)

父组件可以向子组件传递数据，称为 props。

<my-component :title="parentTitle" :message="parentMessage"></my-component>

// 在子组件中接收 props
props: {
  title: String,
  message: String
}

Events (子 -> 父)

子组件可以通过 $emit 触发自定义事件，通知父组件发生了某些事情。

// 子组件触发事件
this.$emit("custom-event", data);

<!-- 父组件监听事件 -->
<my-component @custom-event="handleCustomEvent"></my-component>

Slots (内容分发)

插槽允许父组件向子组件传递内容。

<!-- 子组件定义插槽 -->
<slot></slot>
<slot name="footer"></slot>

<!-- 父组件填充插槽 -->
<my-component>
  <p>这是默认插槽的内容。</p>
  <template v-slot:footer>
    <p>这是具名插槽的内容。</p>
  </template>
</my-component>

Provide / Inject (祖先 -> 后代)

提供了一种跨层级传递数据的方式，类似于 React 的上下文 API。

// 祖先组件提供数据
provide() {
  return {
    sharedData: this.someData
  };
}

// 后代组件注入数据
inject: ['sharedData']

5.动态与异步组件

• 动态组件：根据条件渲染不同的组件。

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

• 异步组件：按需加载组件，提升初始加载性能。

  const AsyncComponent = defineAsyncComponent(() =>
    import("./components/AsyncComponent.vue")
  );

6.生命周期钩子

组件有自己的生命周期钩子，允许您在不同阶段执行代码。常见的钩子包括 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, 和 destroyed。

7.组件库

为了提高开发效率，您可以使用现成的组件库，如 Element UI、Vuetify 或 Ant Design Vue。这些库提供了丰富的预构建组件，帮助快速搭建界面。

通过理解和运用上述概念，您可以更高效地构建复杂的 Vue 应用程序。如果有任何具体问题或需要进一步的帮助，请随时告诉我！