vue 父组件调用子组件事件/子组件调用父组件方法

1、父组件调用子组件方法
<!--父组件-->
<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>

 2、子组件调用父组件

a、子组件通过事件广播的方式触发父组件事件调用
<!--父组件-->
<template>
    <div>
        <div id="chat">
            {{$route.params.name}}
        </div>
        <chat-bar @noticeParent="getNotice"></chat-bar> //在子组件标签上监听noticeParent事件 并通过getNotice进行事件处理
    </div>
</template>

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

  methods:{
      getNotice(params){//在监听到noticeParent进行事件处理
          console.log(params)
      }
  }
}
</script>

<!--子组件-->

<script>
   export default {
 
   methods:{
 
      hide(){
         this.types = '';
　　　　　this.$emit('noticeParent', params) //注册noticeParent事件，对外广播，params是需要传输的参数
      }
   }
}
</script>

b、通过vm.$parent拿到父组件实例，进行父组件中的事件/属性的操作
<!-- 父组件 -->

<template>
    <div>
        <div id="chat">
            {{$route.params.name}}
        </div>
        <chat-bar></chat-bar>
    </div>
</template>

<script>
import chatBar from '@/components/common/chatBar'
export default {
  name:'chat',
　data （）{
　　return {
　　　　age：12
　　}
　}
  components:{
      chatBar
  },

  methods:{
      parentMethod(){
          do something 
      }
  }
}
</script>

<!--子组件-->

<template>
    <div @click="getParentMethod">
　　　　{{this.$parent.age}} //使用父组件的属性
    </div>
</template>

<script>
   export default {
 
   methods:{
 
      getParentMethod(){
         this.$parent.parentMethod() //调用父组件的方法
      }
   }
}
</script>

c、方法以属性传值的方式直接传给子组件，子组件props接收，设置数据类型function，在需要的地方调用。