vue引入组件的方式（全方式）

前言

这篇文章主要总结，vue引入组件的多种方式，局部（页面），全局，异步，动态加载...

---

一 局部引入

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
  }
}
 

二   全局引入

在components文件夹下,新建一个index.js文件

在index.js
import Vue from 'vue'
import Tf from '@/component/Tf'
Vue.component('Tf',Tf)
在main.js
import '@component/index'

 扩展

1.动态组件

2.异步组件