vue 组件之间的方法调用1

1.$ref 父亲调用子的方法

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>

标签：chatBar,vue,hide,backBar,调用,components,组件
来源： https://blog.csdn.net/Listest/article/details/122683901