Vue2的组件

组件

当一个组件需要调用另一个组件时需要通过注册调用

通过Vue.component全局注册组件

// Vue.component(组件名，配置项)

Vue.component('cp1',{
	template:`<div> 我是组件1 {{ a }} </div>`,
	data(){
		return {
			a:456
		}
	}
})

私有子组件

在组件中将需要使用的组件导入

import Left from '@/components/Left.vue'

使用components节点注册

export default {
	name: 'MyComp'
	components: {
		Left
	}
}

注册时可以对组件进行命名，当提供了name属性之后，组件的名称就是name属性的值

组件的 注册名称 的主要应用场景为：以标签的形式，把注册好的组件，渲染和使用到页面结构中

组件声明时候的 name 名称 的主要应用场景为：结合keep-alive标签实现组件缓存功能
以及在调试工具中看到组件的name名称

在组件中以标签形式使用

<div class="box">
	<Left></Left>
</div>

注册全局组件

在Vue项目的main.js入口文件中，通过Vue.component()方法注册全局组件

//导入需要全局注册的组件
import Count from '@/components/Count.vue'

//参数1: 字符串格式，表示组件的"注册名字"
//参数2: 需要被全局注册的那个组件
Vue.component('MyCount',Count)

组件中的props

props是组件中的自定义属性，在封装通用组件时提高组件的复用性

export default {
	//组件的自定义属性
	props: ['自定义属性A','自定义属性B','其他自定义属性..'],
	//组件的私有数据
	data(){
	 return { }
	}
}

与data数据类似，但可以在调用组件的标签中传入数据

export default {
//props是自定义属性，允许通过自定义属性，为当前组件指定初始值
	props: ['init']
}

<MyCount init='9'></MyCount>

此时可以设置init的值为9，props中的数据可以直接在模板结构中被使用

但此时的init为字符串，可以通过v-bind将其转为js代码，使init转为数字

<MyCount :init='9'></MyCount>

但props是只读的，可以修改props的值，也会生效，但会报错

此时可以将props的值转存到data中，再调用data中的数据

props的默认值

props同样可以定义默认值，当调用组件不传入props的值时会使用默认值

export default {
//props是自定义属性，允许通过自定义属性，为当前组件指定初始值
//数组写法为简便写法，定义默认值或其他时需要写为对象写法
	props: {
		init: {
			//用default属性定义属性的默认值
			default: 0
		}
	}
}

当接收值为一个对象时，默认值不能为一个空对象，必须为一个函数，函数返回值为默认值

	props: {
		init: {
			type: Object,
			// 对象或数组默认值必须从一个工厂函数获取
			default: function(){
				return { message: 'hello' }
			}
		}
	}
}

props的type与required

在声明自定义属性时，也可以通过type定义属性的值类型

export default {
	props: {
		init: {
			default: 0,
			//用type属性定义属性的值类型
			//如果传递过来的值不符合此类型就会报错
			type: Number,
			
			//类型也可以定义为数组
			//type: [Number, String]
			
			//是否为必填项，指调用组件时必须传入值（有默认值时也必须传）
			required: true
		}
	}
}

props的validator

export default {
	props: {
		init: {
			default: 0,
			type: Number,
			required: true,
			validator(value){
			// return true的时候才能通过校验 return false或没有return -> undefined时会在控制台警告 但不会阻止代码运行
				if(value>5) return true
				if(value<3) return true
			}
		}
	}
}

props的变量命名

当props中的变量命名为小驼峰时，官方建议在传参时使用连字符

<MyCount :init-count='9'></MyCount>

export default {
	props: {
		initCount: {
			default: 0,
			type: [Number, String]
		}
	}
}

组件样式冲突

默认情况下，写在.vue组件中的样式会全局生效，容易造成覆盖冲突

<style lang='less' scoped></style>

在组件的style标签中加入scoped即可让组件的style样式只对组件中的标签生效

原理为vue编译时在组件模板的每个标签中加上独有的属性选择器，便于对组件中标签进行样式修饰

子组件样式修改

通过scoped属性可以让样式只对本身组件生效，因此对调用的子组件不生效

当需要父组件修改调用了的子组件样式时需要用到/deep/样式穿透

<style lang='less' scoped>
/deep/ h5 {  /*对调用的子组件中的h5标签做样式修改*/
	color:red;
}
</style>