用elementui dialog做为子组件
- 父组件传递visible控制子组件是否显示
- 子组件通过props接收visible , 但是子组件内部不能直接修改父组件传过来的值.
所以在子组件内部定义一个本地变量 myVisible 用来保存 props接收的值
并且通过watch方法监听接收的值, 去更新内部myVisible 变量 - 子组件关闭需要通知父组件, 所以dialog的close方法需上报数据
@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="密码确认" :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>
