子组件中调用父组件的方法以及父组件调用子组件的方法

一、子组件调用父组件的第一种方法

 //1、在父组件中定义一个方法 
<script>
    methods:{
       cancelMessageCenter() {
         this.showMessageCenter = false;
       },
    }
</script>

//2、在子组件指定的事件中进行调用
<div class="picture" @click="cancelPopup">
  <p>内容</p>
</div>

<script>
 export default{
   methods:{
     cancelPopup(){
       this.$parent.cancelMessageCenter();
     }
   }
}
</script>

二、在父组件中进行监听(子组件通过this.$emit向父组件传值，父组件通过自定义属性接收)

//1、父组件中
<div>
    //在父组件中引入的子组件
    <messageCenter :showMessageCenter.sync="showMessageCenter" v-if="showMessageCenter"                 
    @cancelMessageCenter = "cancelMessageCenter"/>
</div>

<script>
export default{
    methods:{
        cancelMessageCenter(){
           this.showMessageCenter = false;
        }
    }
}
</script>

//2.子组件中
<script>
export default{
  cancelPopup() {
    this.$emit("cancelMessageCenter");
  }
}
</script>

三、父组件通过ref调用子组件中的方法

//1、在父组件中引入的子组件
 <communicationCenterPage ref="son"/>

<script>
export default{
    methods:{
        //在父组件中定义一个点击事件
        enterCommunicationCenter(){
              //这里调用子组件的方法
              this.$refs.son.getCompanyList();
        }

    }
}
</script>