【vue】vue父子组件那些事（最全知识点）看这一篇就够了！

【vue】vue父子组件那些事（最全知识点）看这一篇就够了！

父子之间之间的通信

1.父传子（props)

需要在vue实例中添加props事件，如下所示

html:

<cpn :movies="movies">
				
</cpn>

vue:

props:{
				// 提供一些默认值，以及必传值
				movies:{
					type:Array,
					//这里数组或者对象，默认值必须是一个函数
					default(){
						return["sdf"]
					},
					required:true,
				},
			},

props选项：

所传类型： type:数据类型

type:String;//所传参数必须是字符串
type:[String,Number]//多个可能的类型

默认值 default：默认值

defalut:""//默认值为空
defalut:function(){ //带有默认值的对象
	return{message:"hello"}
}

是否必传 required : true

 required : true//必须传数据，否则会报错

函数：

验证函数
validator:function(value){
	//这个值必须是下列字符串中的一个
	return ['success','warning'].indexof(value) !== -1
}

2.子传父自定义事件

$emit，提交事件，提交到父级组件

---

父子组建的访问

父访问子

使用 $children或$refs(引用)

$children的访问

this.$children是一个数组类型，它包含所有子组件对象。

举例

this.$children[0].showMessage();

$children[0],0为组件下标，选中组件后可调用组件方法和属性

$refs

<cpn ref="aaa"></cpn>

console.log(this.$refs.aaa.name);

$refs=>对象类型，默认是一个空的队行，

需要给组件元素添加ref属性，aaa可以理解为键值对，在后面用于选择 元素，选中之后可以调用子组件方法及属性

子访问父组件

this.$parent；

跟children用法类似

扩展

$root,访问根组件