vue子组件修改父组件中变量的值——实现子组件控制父组件弹出对话框

本文内容参考链接：https://www.cnblogs.com/padding1015/p/7878741.html

弹出框使用ElementUI中表单对话框的样式，实现点击用户注册后，header组件获取main组件中dialogFormVisible的值来控制main组件中表单对话框的弹出。

如果直接将表单对话框放在header组件，表单因为header长宽太小变形了，于是，就将对话框放在父组件中。父组件home主要包含<Header/><Main/><Footer/>这三部分，对话框放在Main中。

下面开始讲述如何实现：

因为父组件要有值才能传到子组件，因此：

第一步：先在父组件中定义一个变量，通过true和false控制表单对话框是否显示。

 

第二步：在父组件中给子组件Header绑定子组件需要操作的变量

父组件给子组件绑定值之后，子组件要接收父组件中传来的值，因此： 

第三步： 在header子组件定义props:['需要接收父组件的变量名']

第四步：子组件接收到值之后，尝试使用看是否接收成功，在子组件中使用 { {this.dialogFormVisible}}测试是否接收成功，页面显示内容表示接收成功。

子组件修改变量后，要传变量的值回父组件，这里使用$emit函数传值。

第五步：在子组件的页面使用v-on:click=""绑定点击用户注册的事件函数reqister，然后在methods中编写register函数。

$emit的作用是让registerBoxStatus这个自定义事件发射，这里注意，"自定义事件名" 一定要用引号括起来，不然会报错is not defined