vue 页面与弹框组件之间的相互传值

一、父页面：

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>