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

 

posted @ 2018-11-16 10:31  霜~  阅读(5227)  评论(0编辑  收藏