用elementui dialog做為子組件

1. 父組件傳遞visible控制子組件是否顯示
2. 子組件通過(guò)props接收visible , 但是子組件內(nèi)部不能直接修改父組件傳過(guò)來(lái)的值.
   所以在子組件內(nèi)部定義一個(gè)本地變量 myVisible 用來(lái)保存 props接收的值
   并且通過(guò)watch方法監(jiān)聽(tīng)接收的值, 去更新內(nèi)部myVisible 變量
3. 子組件關(guān)閉需要通知父組件, 所以dialog的close方法需上報(bào)數(shù)據(jù)@close="$emit('dialogClose')"父組件接收并更新visible的值

#父組件
<ChangePassword v-bind:visible="visible" @dialogClose="visible=false"></ChangePassword>
data: function () {
    return {
      visible: false
    }
  },

#子組件
<template>
  <el-dialog title="修改密碼" :visible.sync="myVisible" @close="dialogClose" :append-to-body="true">
    <el-form :model="form">
      <el-form-item label="新密碼" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密碼確認(rèn)" :label-width="formLabelWidth">
        <el-input v-model="form.rePassword" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="myVisible = false">取 消</el-button>
      <el-button type="primary" @click="myVisible = false">確 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
const axios = require('axios')
export default {
  name: 'ChangePassword',
  data () {
    return {
      form: {
        password: '',
        rePassword: ''
      },
      formLabelWidth: '120px',
      myVisible: false
    }
  },
  props: ['visible'],
  watch: {
    visible: function (newV, oldV) {
      this.myVisible = newV
    }
  }
}
</script>