【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,提交事件,提交到父级组件


父子组建的访问

父访问子

使用 c h i l d r e n 或 children或 childrenrefs(引用)

$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,访问根组件

Logo

前往低代码交流专区

更多推荐