vue 父组件调用子组件事件 用来控制子组件显示

<!--父组件-->
<template>
    <div>
        <back-bar></back-bar>
        <div id="chat" @click="hideChatBarComp">
            {{$route.params.name}}
        </div>

　　　　　　<!-- 给子组件注册引用信息 父组件通过$refs拿到的是子组件的组件实例对象-->

        <chat-bar ref="change"></chat-bar>
    </div>
</template>

<script>
import backBar from '@/components/common/backBar'
import chatBar from '@/components/common/chatBar'
export default {
  name:'chat',
  components:{
      chatBar,
      backBar
  },

  methods:{
      hideChatBarComp(){
          //父组件通过$ref获取到子组件的实例对象并调用子组件的hide方法
          this.$refs.change.hide();
      }
  }
}
</script>

<!--子组件-->

<script>

   export default {

 

   methods:{

 

      hide(){

         this.types = '';

      }

   }

}

</script>