Vue子组件和父组件的双向通信

1.子组件==>父组件

子组件：

<template>
   <div class="app">
  	  <input @click="sendToParent" type="button" value="给父组件传值">
   </div>
</template>
<script>
export default {
    data () {
        return {
            msg: "给父组件传的值msg",
        }
    },
     methods:{
         sendToParent(){
             //关键代码 		 
             //将msg的值绑定到父组件的getMessage方法上
             this.$emit('sendToParent',this.msg)
         }
     }
}
</script>

父组件：

    <template>
        <div class="app">
       	    //关键代码
            <child @getMessage="getMessage"></child>
        </div>
    </template>
    <script>
    import child from './child.vue'
    export default {
        data () {
            return {
                msgSon: "父组件默认的值"
            }
        },
        components:{
            child
        },
        methods:{
                getMessage(data){
               // 将值传给msgSon
                this.msgSon = data
                console.log(this.msgSon) //输出值为:"给父组件传的值msg"
                }
        }
    }
    </script>

2.父组件==>子组件

父组件

<template>
  <div class="app">
    //子组件是一个小弹窗
    //ref="Son"不能忘记加
    <Son @btnClick='btnClick' ref="Son"></Son>
  </div>
</template>

<script>
  import Son from './Son.vue'
  export default {
    components: {
      Son
    },
    data() {
        return {
    },
    methods: {
	   	btnClick() {
           //调用子组件AddEdit的showDialog方法
           this.$refs.Son.showDialog();
           //给子组件Son的value赋值
           this.$refs.Son.value="value是子组件的值";
	    };
     }
  }
}
</script>

子组件

<template>
 <div class="app">
  	//el-dialog是element-ui的组件
    <el-dialog  @btnClick="btnClick" :visible="dialogVisible" 
    </el-dialog>
   <input type="text" :value="value"/>
 </div>
</template>
export default {
    data() {
      return {
      	value:"哈哈哈"
    },
    methods: {
      //显示小弹窗
      showDialog() {
      //利用dialogVisible的值来控制这个小弹窗的显示或者隐藏
        this.dialogVisible = true
      },
    }
  }
}