Vue 父组件调用子组件方法

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>

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

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