vue引入组件有哪些方式
vue引入组件主要有两种方式：局部引入和全局引入。其中，局部引入又分为直接引入和结构赋值引入。在项目开发中，公用的组件放置在components目录下，通常需要将复用率极高的组件注册成全局组件，这样在使用时就不需要每一次都要引入，直接使用即可。
一、局部引入
局部引入主要有两种方式，一是直接引入；二是结构赋值，引入。
1、直接引入
<template>
<He></He>
</template>
<script>
import HelloWorld from ‘@/components/HelloWorld.vue’
export default {
name: ‘Home’,
components: {
‘He’:HelloWorld
}
}
</script>
2、结构赋值，引入
<template>
<HelloWorld></HelloWorld>
</template>
<script>
import HelloWorld from ‘@/components/HelloWorld.vue’
export default {
name: ‘Home’,
components: {
HelloWorld
}
}
二、全局引入
项目开发中，我们需要将复用率极高的组件注册成全局组件，这样我们在使用时就不需要每一次都要引入，直接使用即可。
在vue的文档中，全局组件使用:
// Create a Vue application
const app = Vue.createApp({})
// Define a new global component called button-counter
app.component(‘button-counter’, {
data() {
return {
count: 0
}
},
template: `
<button v-on:click=”count++”>
You clicked me {{ count }} times.
</button>`
})
app.mount(‘#components-demo’)
使用的时候，直接在组件中随意调用，因为我们Vue实例是在main.js中创建的，所以我们需要在main.js中引入需要的组件，然后批量注册即可。
延伸阅读
什么是vue组件
组件（Component）是Vue.js 较早大的功能之一。组件可以扩展HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML 元素的形式，以is 特性扩展。
组件机制的设计，可以让开发者把一个复杂的应用分割成一个个功能独立组件，降低开发的难度的同时，也提供了极好的复用性和可维护性。组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。组件化和模块化的视角不同：
- 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
- 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用。
可复用组件，高内聚、低耦合。Vue中提供了少量的内置组件(keep-alive、component、transition、transition-group等)，但可以自定义组件。Vue API中，提供了Vue.extend和Vue.component两个全局方法创建/注册组件，还有一个实例选项components，用来注册局部组件。
