Vue子组件调用父组件方法

 父组件

        父组件中通过 @绑定子组件中 $emit 的方法，后面跟父组件自己的方法，或者直接方法的实现。这里直接实现让弹框是否可见为 false 如下：

<!--   详情对话框   -->
        <detail-dialog :workOrderDetailDialogVisible="workOrderDetailDialogVisible" 
                       @dialogClose="workOrderDetailDialogVisible = false"/>

<script>
import detailDialog from '../../components/installWorkOrder/InstallWorkOrderDetailDialog'

export default {
  components: { detailDialog },
  data () {
    return {
      // 详情对话 -故障单详情
      workOrderDetailDialogVisible: false
    }
}
</script>

 子组件

        这是一个 element ui 的对话弹框，通过关闭事件 @close 调用父组件的方法 设置弹框是否可见。

    <el-dialog title="装机工单详情"
               width="85%"
               :append-to-body='true'
               :visible.sync="workOrderDetailDialogVisible"
               @close="handleClose"
               class="demo-ruleForm">...</el-dialog>

        上面的 handleClose 方法，通过 this.$emit('XXX'，args...) 来调用父组件的方法。 参数是在父组件的子组件标签中绑定的方法名，和方法参数。

<script>
export default {
  props: ['workOrderDetailDialogVisible'],
  methods: {
    handleClose () {
      this.$emit('dialogClose')
    }
  }
}
</script>