vue父子组件传值

我想实现一个在父组件上点击，然后弹出一个子组件窗口，涉及到的知识点主要是：

• 子组件用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);
    },

这样，子组件就又被隐藏了