vue 父组件调子组件方法_Vue 父组件调用子组件方法

Vue 父组件调用子组件方法

在很多时候，我们需要使用到父子组件，例如嵌套弹窗，这时候可以使用父子组件通信，或者父子组件方法调用，在这里使用到了父组件调用子组件的方法来实现功能。

通过 ref 调用子组件方法

这种方法是比较简便的，其他方法可另外学习。

父组件代码

举报

import mainOrderReport from "@/views/mainOrderReport/index"

export default {

//子组件注册

components: {

mainOrderReport

},

methods: {

//点击举报按钮触发事件

openchildReport(data) {

//调用子组件方法，并传参过去

this.$refs.child.openReport(data);

},

}

}

通过ref 关联子组件，调用子组件方法并传递参数。

子组件代码

export default {

data() {

return {

form: {},

reportValue: false,

}

},

//被父组件调用，并接收参数

openReport(data) {

console.log("mainID:" + data);

this.reportValue = true

this.form.mainID = data

},

}

子组件方法被调用，并获取到参数。

该方法是比较简便，推荐大家使用。至于另外的父子组件通信，不满足需求的情况下可另行学习。