vue自定义组件

一、使用组件的好处

• 组件是可以复用性的
• 易于维护
• 有封装性，易于使用
• 大型项目中降低组件之间重复性

二、在项目中是如何封装组件的

在vue中开发，都是用的组件化的思想开发的，一般在项目src中创建一个components文件夹存放我们自定义的组件，在需要的页面中导入并注册后，通过标签的形式使用。

1.第一步：在页面中引入子组件,(假设在components文件下有一个myHeader.vue组件)
import myHeader from '@/components/myHeader.vue'
2.第二步：注册子组件
components:{
   
	myHeader
}
3.第三步：作为标签使用
<myHeader />
或者
<myHeader></myHeader>

三、组件的分类

组件分为：全局组件和局部组件
全局组件

import Loading from '@/components/myLoading.vue'
Vue.component('loading',Loading)

局部组件

<script>
import Loading from '@/components/myLoading.vue'
export default {
   
	data() {
   
		return {
   }
	},
	components:{
   
		Loading,
	}	
}
</script>

四、组件之间的通讯方式

父传子

父组件：<list :list="list"></list>
// props接收过来的数据和data类似 可以直接像data