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>