vue单页面调用多个子组件及将elment窗口封装为子组件

最将有一个需求，就是将一个页面的功能拆分，比如新增跟修改的窗口单独封装为各自个组件。不过对于窗口能正常显示便遇到难题，近日解决。以此博客留念，希望对大家有所帮助

**1.**先有一个主界面Index.vue

<template>
<!--点击弹出增加窗口-->
   <el-button
  		 @click="handleAdd"
        >新增</el-button>
        <!--点击弹出修改窗口-->
        <el-button
  		 @click="handledit"
        >新增</el-button>
//调用子组件
<add  ref="add"/>
<add  ref="edit"/>
</template>

 <script>
 import add from './addproduct.vue'
 import edit from './addproduct.vue'
  export default {
    data(){
    return{
				}
    },
    methods:{
		handleAdd(){
		//通过refs直接调用add中的show（）方法，将visi变为true
		this.$refs.add.show();
		
		},
		handledit(){
		this.$refs.edit.show();
		}
},
//注册子组件
components:{
      addp,
    	edit
  },
    }
</script>

ADD.vue 增加窗口

<template>
<div>
  <el-dialog  :title="title" :visible.sync="visi" width="500px" append-to-body :before-close="handleClose">
  我是add窗口
  </el-dialog>
  </div>
  </template>
   <script>
  export default {
    name: "add"
    data(){
    return{
			visi:false
				}
    },
    show(){
	this.visi=true
	},
	 methods:{
			 show(){
	this.visi=true
	}
}
    }
</script>

edit.vue 修改窗口

<template>
<div>
  <el-dialog  :title="title" :visible.sync="visi" width="500px" append-to-body :before-close="handleClose">
  我是edit窗口
  </el-dialog>
  </div>
  </template>
  <script>
  export default {
    name: "edit"
    data(){
    return{
			visi=flase
				}
    },
    methods:{
			 show(){
	this.visi=true
	}
}
    }
</script>

这代码没编译过,只是将思路瞧出来而已,本质是通过操控子组件的show方法来实现窗口的显示消失的，可以不用也不推荐props来传递一个boolea字符过去操控窗口的消失与显示。
如上