VUE 创建组件常见的几种方式

在 Vue.js 中，组件的创建和使用通常遵循以下三种方法：

1. 全局组件

全局组件是通过 Vue.component() 方法创建的，注册后的组件可以在任何新创建的 Vue 实例（包括根实例）的模板中使用。

Vue.component('my-component', {
  template: '<div>这是一个全局组件</div>'
})

// 在 Vue 实例的模板中直接使用
<my-component></my-component>
1
2
3
4
5
6

2. 局部组件

局部组件是在 Vue 实例或组件的 components 选项中定义的，只能在当前 Vue 实例或组件的模板中使用。

const MyComponent = {
  template: '<div>这是一个局部组件</div>'
}

export default {
  components: {
    'my-component': MyComponent
  },
  // ...
}

// 在该组件的模板中使用
<my-component></my-component>
1
2
3
4
5
6
7
8
9
10
11
12
13

3. 单文件组件 (SFCs)

单文件组件（Single File Components，简称 SFCs）是 Vue.js 官方推荐的一种组件编写方式，它将一个组件的模板、JavaScript 和 CSS 写在同一个 .vue 文件中。

MyComponent.vue

<template>
  <div>这是一个单文件组件</div>
</template>

<script>
export default {
  // ...
}
</script>

<style scoped>
/* 组件的样式 */
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

要在其他组件或 Vue 实例中使用单文件组件，你需要使用构建工具（如 Webpack 或 Vite）和相应的加载器（如 vue-loader 或 @vitejs/plugin-vue）来处理 .vue 文件。然后你可以像局部组件那样在 components 选项中注册它。

import MyComponent from './MyComponent.vue'

export default {
  components: {
    'my-component': MyComponent
  },
  // ...
}

// 在模板中使用
<my-component></my-component>
1
2
3
4
5
6
7
8
9
10
11

这三种方法可以根据你的项目需求进行灵活选择。对于小型项目或快速原型，全局组件可能足够简单和方便。对于大型项目，使用局部组件和单文件组件可以更好地组织代码，提高可维护性和可重用性。