vue之彈出框傳值問題

 

發現問題：將 dialogStatus 值定義在 data 里，出現第一次進入彈出框頁面 dialogStatus 值為空，第二次進入時 dialogStatus 有值。

在一個vue頁面，進入另一個彈出框定義的vue（傳入dialogStatus值）時，我遇到第一次進入彈出框頁面dialogStatus值為空，第二次進入時值傳過去了。

代碼：

vue頁面：

<el-dialog :title="textMap[dialogStatus]" size="large" :visible.sync="dialogFormVisible">
      <modify @closeStationDialog="closeStationDialog" :dialogStatus="dialogStatus" ref="modify"></modify>
</el-dialog>

export default {
   components: {
    'modify': () => import('./components/modify')
  },
  methods: {
      handleAdd(){
          this.dialogStatus = 'create';
          this.dialogFormVisible = true;
          console.log(this.$refs.modify);
          if (this.$refs.modify !== undefined) {
            this.$refs.modify.dialogStatus = this.dialogStatus;
          }
      }
   }
}

modify頁面（彈出框頁面）：

<div style="text-align: center; margin-bottom: 1rem;">
     <el-button @click="cancel('form')">取 消</el-button>
     <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">確 定</el-button>
     <el-button v-else type="primary" @click="update('form')">確 定</el-button>
</div>

export default {
    data(){
       return{
          dialogStatus: ''
       }
  }
}

發現問題：將 dialogStatus 值定義在 data 里，出現第一次進入彈出框頁面 dialogStatus 值為空，第二次進入時 dialogStatus 有值。
解決辦法：將 dialogStatus（需要傳遞的值）定義在 props 里。

export default {
props: {
dialogStatus: {
default: '1'
}
}
}