一、父页面：

1.html

<el-button type="primary" plain size="mini" @click="handleToolingSelection">工装选择</el-button>

　<!-- 调用组件 -->   <loan-tooling-dialog :show.sync="isTooling" v-if="isTooling" :form="form" @updateTable="updateTable"></loan-tooling-dialog>

2.js

//①引用组件
import loanToolingDialog from '@/views/production/industrial/loanTooling.vue'

// ②data
data:{

      // 工作选择       isTooling: false, 　　　　form:{}, // 传递过去的数据 },   // ③方法 methods:{     handleReturnTooling() {       this.isReturn = true     }, }   // ④子组件数据传过来     updateTable(data) {       debugger       this.isTooling = false       this.form.toolingInfo.toolingNo = data.toolingNo        this.form.toolingInfo.toolingName = data.toolingName     },

 

二、子组件

<template>
  <div>
    <el-dialog title="工装选择" append-to-body width="800px" :visible="show" @close="cancel" :close-on-click-modal="false" v-dialogDrag>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'loanTooling',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {

    }
  },
  methods: {
    cancel() {
      this.$emit('update:show', false)
    },
  }
}
</script>