vue自定义组件

一般在项目src中创建一个components文件夹存放我们自定义的组件，在需要的页面直接使用

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

使用组件的好处

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

全局组件

组件分为：全局组件和局部组件
全局组件在main.js中直接使用Vue.component

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

局部组件

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

组件之间的通讯方式

父传子

子传父

兄弟之间

组件样式穿透

为了让组件中的样式不影响其他组件的样式，只在当前组件起作用，我们会加上scoped

<style lang ='scss'></style>

有时候我们想让某个样式影响子组件，这时候我们可以使用操作符

css中
<style scoped>
	>>> .active {}
</style>
sass中
<style lang='scss' scoped>
	/deep/ .active {}
</style>