vue父子组件方法的调用和传值

子组件调用父组件的方法 

1.直接在子组件中通过this.$parent.event来调用父组件的方法。


父组件

2.在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了


父组件


子组件


3.父组件把方法传入子组件中,在子组件里直接调用这个方法


子组件


父组件


父组件调用子组件的方法 


 父组件利用ref属性操作子组件方法


父组件


子组件

父组件向子组件传值


父组件调用子组件的时候动态绑定属性,子组件定义props接收动态绑定的属性


父组件


子组件


子组件主动获取父子间的属性和方法



父组件
子组件

子组件向父组件传值

父组件调用子组件时绑定属性ref;在父组件中使用this.$refs.child.属性


父组件


子组件

子组件调用this.$emit('方法名‘,传值),父组件通过子组件绑定的'方法名'获取传值。

父组件


子组件
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。