vue 弹框共用

1.以本人项目为例 修改 新增使用同一个模态框

<el-button type="warning" @click="AddCategory">新增一级分类目录</el-button>

<Dialog ref="myDialog" @updateViews="updateViews" :input="input" :cid="cid"></Dialog>

import Dialog from './Dialog.vue'
	export default {
		components:{
			Dialog,
		},
}

2.点击新增修改按钮时打开模态框

//树节点的内容区的渲染 Function	Function(h, { node, data, store })
			renderContent(h, { node, data, store }) {
			  // console.log('树节点的内容区的渲染 Function',node,data);
			  return (
			    <span class="custom-tree-node">
			      <span class='name'>{data.name}</span>
			      {data.type == 1 ? <span style="width:300px;disply:flex;justify-content: space-between;">
			        <el-button class='mini' on-click={() => this.append(data)} icon="el-icon-plus">新增</el-button>
			        <el-button class='mini' on-click={() => this.update(node, data)} icon="el-icon-edit">修改</el-button>
			        <el-button class='mini' type="danger" on-click={() => this.remove(node, data)} icon="el-icon-delete">删除</el-button>
			      </span> : <span>
			        <el-button class='mini' on-click={() => this.update(node, data)} icon="el-icon-edit">修改</el-button>
			        <el-button class='mini' type="danger" on-click={() => this.remove(node, data)} icon="el-icon-delete">删除</el-button>
			      </span>}

			    </span>);
			},

3. 定义新增修改方法，打开模态框，并且给模态框设置标题

// AddCategory 新增一级分类接口
			AddCategory(){
				// 1.打开对话框
				this.$refs.myDialog.dialogVisible = true;
				// 2.新增分类
				// this.insertCategory();
				// 给弹框设置标题
				this.$refs.myDialog.title = '新增一级分类'
				
			},
			//新增子类---------------------------------
			append(data) {
				console.log('新增子类');
				// 1.打开对话框
				this.$refs.myDialog.dialogVisible = true;
				// 给弹框设置标题
				this.$refs.myDialog.title =`新增${data.name}的分类子目录`;
				// this.input = {name:data.name,cid:data.cid};
				this.cid = data.cid;
			},

4.在点击按钮时，修改模态框状态，默认dialogVisible: false,使用this.$refs.myDialog.dialogVisible = true;打开模态框，无论修改还是增加，都是点击模态框中的确认按钮，出触发onsubmit方法.根据把标题字段区别，判断操作为新增或者修改。在最后需要通知父组件更新视图。

onsubmit() {
				if(this.title === "新增一级分类")
				{
					// 1.新增接口
					this.insertCategory(this.form.name);
					
				}else if(this.title === "修改分类名称"){
					// 1. 修改接口
					this.updateCategory(this.form.id,this.form.name);
				}else{
					// 新增子类目接口
					this.insertItemCategory(this.form.name,this.cid);
					console.log("---------",this.form.name,this.cid)
				}
				// 2.关闭弹框
				this.dialogVisible = false;
				//清空弹框
				this.form = [];
				// 通知父组件更新视图
				this.$emit('updateViews');
			},

 

--------------父组件中，更新视图
<!-- 弹框--添加修改内容---弹框展示 -->
			<Dialog ref="myDialog" @updateViews="updateViews" :input="input" :cid="cid"></Dialog>


// 更新视图
			updateViews(){
				this.itemCategory();
			},
			

5.修改时，已有数据需要回显，在主页面中定义input，使用对象传递参数，在弹框页面，使用props接收父组件传递的参数。

-------------------主页面
return {
				input: '',
				cid: '',
				data: [{
					id: 1,
					name: '一级 1',
					children: [{
						id: 4,
						name: '二级 1-1'
					}]
				}]
			}
---------------------弹框页面
export default {
		props:['input','cid'],
}
----------------监听事件，数据发生变化时，调用

watch:{
			input(val){
				this.form.name = val.name;
				this.form.id = val.id;
			}	
		},