对话框的开启和关闭

基于 element-ui 的 Dialog 对话框
Vue允许注册组件，把一个复杂的页面分成多个组件，会使代码逻辑更加清晰。这里假设一个列表页面中，点击一个按钮，可以打开一个添加功能的对话框。

代码分析

父组件

<template>
    <div>
    	<my-son-dialog v-model="visible"></my-son-dialog>
		<button @click="openDialog">点我打开添加对话框</button>
    </div>
</template>

<script>
import sonDialog from './sonDialog.vue'	// 这里引入 添加对话框
export default {
    name: 'MyDialog',
    components:{
		'my-son-dialog': sonDialog  // 注册 组件
	},
    data() {
        return {
        	visible: false
        }
    },
    methods: {
        openDialog() {	// 这里通过visible，控制对话框的开启
        	this.visible = true
        }
    }
}
</script>

子组件

<template>
    <div>
		<el-dialog 
			title="提示" 
			:visible.sync="dialogVisible" 
			width="30%" >
			  <span>这是一段信息</span>
			  <span slot="footer" class="dialog-footer">
			    	<el-button @click="dialogVisible = false">取 消</el-button>
			    	<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			  </span>
		</el-dialog>
    </div>
</template>

<script>
export default {
    name: 'sonDialog',
    props: {
		 value: {
            //控制弹窗打开
            type: Boolean,
            required: true
        },
	},
    computed: {
        dialogVisible: {	// 这里通过 computed 方法 来定义  变量 dialogVisible
            get: function () {	// 初始化 dialogVisible 的值
                return this.value
            },
            set: function (val) {	// 当 dialogVisible 需要赋值时，直接改变 父组件中的值
                this.$emit('input', val)
            }
        }
    }
}
</script>