Vue 父组件调用子组件方法
在很多时候,我们需要使用到父子组件,例如嵌套弹窗,这时候可以使用父子组件通信,或者父子组件方法调用,在这里使用到了父组件调用子组件的方法来实现功能。
通过 ref 调用子组件方法
这种方法是比较简便的,其他方法可另外学习。
父组件代码
<!-- 父组件 -->
<template>
<div>
<div class="more-action">
<el-popover placement="bottom" width="100" trigger="click">
<!-- 举报按钮 -->
<div class="report" @click="openchildReport(orderData.id)">举报</div>
<i slot="reference" class="el-icon-more"></i>
</el-popover>
</div>
<!-- 调用子组件,通过ref关联子组件 -->
<mainOrderReport ref="child"></mainOrderReport>
</div>
</template>
<script>
import mainOrderReport from "@/views/mainOrderReport/index"
export default {
//子组件注册
components: {
mainOrderReport
},
methods: {
//点击举报按钮触发事件
openchildReport(data) {
//调用子组件方法,并传参过去
this.$refs.child.openReport(data);
},
}
}
</script>
通过ref 关联子组件,调用子组件方法并传递参数。
子组件代码
<template>
<div>
<el-dialog title="选择举报类型" :visible.sync="reportValue" :close-on-click-modal="false" :append-to-body="true">
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
form: {},
reportValue: false,
}
},
//被父组件调用,并接收参数
openReport(data) {
console.log("mainID:" + data);
this.reportValue = true
this.form.mainID = data
},
}
</script>
子组件方法被调用,并获取到参数。
该方法是比较简便,推荐大家使用。至于另外的父子组件通信,不满足需求的情况下可另行学习。