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>
 

子元件方法被呼叫，並獲取到引數。

該方法是比較簡便，推薦大家使用。至於另外的父子元件通訊，不滿足需求的情況下可另行學習。