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，在需要的地方調用。