Vue子父组件方法互调

讲干货,不啰嗦,大家在做vue开发过程中经常遇到父组件需要调用子组件方法或者子组件需要调用父组件的方法的情况,现做一下总结,希望对大家有所帮助。


父组件调用子组件方法:

1.设置子组件的ref,父组件通过this.$refs.xxx.method_name(data)调用子组件方法,data参数可选

父组件:

子组件:

子组件调用父组件方法:

1.在子组件中通过this.$parent.event来调用父组件的方法,data参数可选

父组件:

 子组件:

2.在子组件里用$emit向父组件触发一个事件,父组件监听这个事件,data参数可选

父组件:

子组件:

3.父组件通过props把方法传入子组件中,在子组件里直接调用这个方法,data参数可选

父组件:

子组件:

你可能感兴趣的:(Vue子父组件方法互调)