vue中父组件控制子组件的显示隐藏
vue中父组件控制子组件的显示隐藏
·
1.需求
1.1 父组件点击新增或者修改时,子组件对话框显示
1.2 子组件的标题和确认按钮,根据父组件单击按钮来改变
2. 做法
2.1 在子组件内部做一个show方法(函数名随意),在子组件内部定义变量,父组件调用子组件的show方法,并传入对应的参数,子组件根据对应的参数,给自己组件内部的变量赋值
这样做,而不用props,和emit传值的方法,优点是子组件的显示隐藏都由子组件自己内部变量控制,
如果使用props传值,还要监听父组件传过来的值
子组件show方法
/**
* 对话框展示,被父组件调用
* @param visible 对话框是否可见
* @param title 对话框的标题
* @param buttonText 对话框底部确认按钮的文本
* @param type 父组件传过来的参数,用来判断是新增还是修改
* @param projectName 项目名称,修改需要用到
* @param parentTableData 父组件的表格数据,来做表单验证,判断是否重名
*/
show(visible, title, buttonText, type, projectName, parentTableData) {
this.visible = visible
this.innerDialogData.title = title
this.innerDialogData.buttonText = buttonText
this.type = type
this.formInDialog.projectName = projectName
this.tableData = parentTableData
},
父组件调用子组件的方法
<el-button type="primary" size="mini" @click="handleDialogShow('add')">新增</el-button>
<el-button type="warning" size="mini" @click="handleDialogShow('modify')">修改</el-button>
/**
* 单击新增或修改,dialog出现
* @param value 传过来的字符串,来判断点的是哪个
*/
handleDialogShow(value) {
let visible, title, buttonText, type, projectName, parentTableData = this.parentTableData
if (value === 'add') {
visible = true
title = '新建'
buttonText = '新增'
type = 'add'
projectName = ''
} else {
if (this.multipleSelection.length !== 1 || this.multipleSelection.length === 0) {
this.$message.warning('请选择一个项目进行修改')
} else {
visible = true
title = '修改'
buttonText = '保存'
type = 'modify'
projectName = this.multipleSelection[0].name
}
}
this.$refs.addProjectDialog.show(visible, title, buttonText, type, projectName, parentTableData)
},
更多推荐
已为社区贡献1条内容
所有评论(0)