前言
这篇文章主要总结,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.异步组件