element-ui拆分dialog到子組件

今天花了一個晚上的時間，調試了一個功能。由於我須要一個比較複雜並且可以重用的dialog，也就是新建和編輯用同一個dialog，因此我把它拆分到了一個子組件中。這個dialog的隱藏和顯示，就稍微有些麻煩了，並且官方的文章我也沒有找到直接的操做方法，因此記錄一下。

<el-button type="primary" @click="showDialog = true">添加</el-button>

<new-form :dialogVisible.sync="showDialog" ></new-form>

首先定義一個按鈕，控制new-form組件的展現和隱藏，data裏別忘了添加這個變量。
這裏重點注意的是：.sync在element官方文檔中，是直接寫在dialog組件裏的，這裏咱們拆分出來，後面再說爲何。

創建子組件，幷包括一個dialog。

<template>
  <el-dialog title="添加條目" :visible="dialogVisible" @close="onClose()">
    <el-form :model="form">
       // 這裏加上表單的輸入項目
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onClose()">取 消</el-button>
      <el-button type="primary" @click="onClose()">確 定</el-button>
    </div>
  </el-dialog>
</template>

關鍵點1: props子屬性props:['dialogVisible'],
關鍵點2:

onClose(){
    this.$emit('update:dialogVisible', false)
},

來源是vue文檔
關鍵點3: 肯定和取消以及dialog自帶的關閉按鈕被點擊的時候，調用onclose，若是沒有肯定取消按鈕，至少在dialog的close事件上必定要綁定。

從頭梳理一下流程：父組件點擊按鈕=>傳遞值給子組件=>窗口展現。因爲dialog被拆分到子組件，因此.sync語法糖被從dialog中提取到父組件中，確保當子組件dialog關閉，調用emit更新以後，父組件可以同步到最新的showDialog變量的值，而後傳遞給子組件，從而完成窗口隱藏。子組件關閉事件觸發=>調用onClose函數=>emit傳遞給父組件最新的值=>父組件.sync語法糖觸發=>父組件傳遞給子組件最新的值=>子組件完成dialog關閉。

我解決這個問題的關鍵在這個補充閱讀

這裏面還有一個疑惑，那就是dialog的close事件。若是我不綁定@close="onClose()"，那麼點擊右上角的關閉按鈕，沒法關閉。若是我綁定了，那麼當點擊肯定取消的時候，調用一次onClose，以後父組件會觸發子組件的close事件，這個onClose還會被調用一次，就調用了兩次。這個若是你們研究出了更好的方法，避免兩次調用，但願能分享一下經驗。

更新：其實加個簡單的if判斷就行了，若是visible=true，就emit事件。

---

PS：感謝評論區提供的意見，我實現了第二種版本，供你們參考。複雜度差很少，可是解藕方面更加清晰一些。

dialogVisible從props中移動到data中成爲本地變量，created函數中加入

this.$on('open', function(){
    this.dialogVisible = true
});

去掉子組件onClose函數，父組件修改成

<el-button type="primary" @click="open()">添加</el-button>

<new-form ref="form"  ></new-form>

父組件添加函數

open(){
    this.$refs.form.$emit("open")
}

若是有遺漏致使not working，我目前運行正常，你們在評論區留言。