组件是 Vue.js 应用中可复用的代码块，它们封装了可重用的代码逻辑和模板。组件可以用来构建用户界面，将 UI 分成独立的、可复用的部分。

组件的基本结构

一个组件由三个主要部分组成：

  • 模板 (Template): HTML 标签，用于定义组件的结构。
  • 脚本 (Script): JavaScript 代码，用于定义组件的逻辑。
  • 样式 (Style): CSS 代码，用于定义组件的外观。

模板

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>

脚本

<script>
export default {
  data() {
    return {
      title: '组件指南',
      description: '了解如何在 Vue.js 中使用组件。'
    };
  }
};
</script>

样式

<style scoped>
h1 {
  color: #333;
}
p {
  color: #666;
}
</style>

组件的注册

Vue.js 提供了两种注册组件的方式：全局注册和局部注册。

全局注册

Vue.component('my-component', {
  template: '<div>Hello, Vue!</div>'
});

局部注册

export default {
  components: {
    'my-local-component': {
      template: '<div>Hello, Local!</div>'
    }
  }
};

组件通信

组件之间可以相互通信，主要有以下几种方式：

  • Props: 父组件向子组件传递数据。
  • Events: 子组件向父组件发送事件。
  • Slots: 允许父组件插入子组件的模板内容。

Props

<child-component :message="parentMessage"></child-component>

Events

this.$emit('custom-event', data);

Slots

<child-component>
  <template slot="header">
    <h1>标题</h1>
  </template>
</child-component>

学习更多

想要更深入地了解 Vue.js 组件，可以访问我们的组件文档。

希望这些信息能帮助您更好地理解 Vue.js 组件。🌟

Component Structure