我想实现一个在父组件上点击,然后弹出一个子组件窗口,涉及到的知识点主要是:
- 子组件用props属性接收父组件传过来的值
- 子组件用this.$emit向父组件发送事件xxx
- 父组件用@xxx="yyy"监听xxx事件,然后执行yyy函数
具体说来是这样:
0.首先当然是父组件import子组件,在components中注册子组件
1.在父组件中定义一个属性,用于控制子组件是否可见
//script
data () {
return {
dialogVisible: false,
}
},
父组件的前端代码部分,像下面这样写
子组件的前端代码部分,像下面这样写:
有6个部分,我逐一解释说明:
1) 首先submit-frame是我的子组件
2) submitTest是父组件的点击事件,内容如下,主要就是修改dialogVisible的值
submitTest(){
this.dialogVisible=true;
console.log(this.dialogVisible);
},
3) dialog-form-visible
是子组件的props属性,用于接收从父组件中传过来的值
props:{
dialogFormVisible:{
type: Boolean,
default: false
}
}
4) 子组件中用visible.sync="dialogFormVisible"
来控制这个组件是否可见,这样,父组件向子组件传消息的过程就完成了
接下来是子组件向父组件传值
1) 子组件中用handle-close处理点击关闭按钮(也就是点击弹出框右上角的那个×)事件,内容如下:
handleClose(){
this.$emit('hideDialog')
},
用于向父组件发送hideDialog事件
2) 然后我们再回来看一下父组件的前端的这部分代码:@hideDialog=“hideDialog”
等号左边的@hidedialog就是用来监听子组件传过来的hideDialog事件,监听到后,就执行父组件中定义的hideDialog事件:
hideDialog(){
this.dialogVisible=false;
console.log(this.dialogVisible);
},
这样,子组件就又被隐藏了