vue+elementui 页面弹出框

用vue+elementui写后台时，实现页面间弹出框的form表单,使用父子组件间传值

父组件向子组件传值,父组件向子组件传值是通过props传递的

子组件向父组件改变值时，通过$emit改变

父组件中：

import ExitProductCreate from '../dialog/ExistProductCreate'
//前面使用props传值，后面捅过$emit改变父组件间的值
<ExitProductCreate :dialogVisible="dialogVisible1" v-on:changeFather="showEpcre()"></ExitProductCreate>

export default {
components{

ExistProductCreate

}

data() {
return {

dialogVisible1 : false
}
}

子组件中

html中：
//通过点击取消按钮，关闭弹出框，改变父组件中的值
<el-button @click="cancle">取消</button>

js中：
export default {
  props: {// 接受父组件传递过来的props
    dialogVisibe:Boolean
}
// 监听父组件穿过来的值
  watch: {
   dialogVisible: function(newItemVal, oldItemVal) {
      this.dialogVisible1 = newItemVal;
}，
methods:{
 cancle(){
     this.dialogVisible1 = false;
    this.$emit("changeFather","false")

}
}