【vue】引入组件

一个vue的页面一般是由多个组件构成的，接下来将讲讲vue如何引入组件

组件存放

在开发大型项目时：

• 公共组件存放在component中
• 页面组件存放在当前页面的文件夹中（或者同级文件夹中）

全局注册

例如引入TopHeader顶部导航栏组件

在main.js中添加如下代码：

import TopHeader from "@/component/TopHeader"
//全局组件挂载
Vue.component('TopHeader',TopHeader)//其中'TopHeader'为组件的名字

使用

当使用首字母大写命名定义组件时，在引用组件时可以使用以下两种写法

当使用短横线分割命名定义组件时，在引用组件时只能使用第二种写法

//写法一：
<TopHeader></TopHeader>
//写法二：
<top-header></top-header>

注意！组件内部要定义name

局部注册

例如引入TopHeader顶部导航栏组件

在想要引入组件的vue文件中添加如下代码：

import TopHeader from "@/src/views/common/TopHeader"
export default{
    
    
    //写法一：
    components:{
    
    
        'TopHeader':TopHeader//引号中可以设置组件名
	}
    //写法二：
    components:{
    
    
        TopHeader
	}
}


//写法三：()
export default{
    
    
    components:{
    
    
        TopHeader：() => import("@/src/views/common/TopHeader")
	}
}