vue调用方法其他组件

Question

如何在Vue中调用方法其他组件？

我有分量HeaderSearch

<template> 
    <form action=""> 
     <div class="form-group"> 
      <div class="input-group"> 
       <span class="input-group-btn"> 
        <button class="btn" type="button"> 
         <i class="fa fa-search"></i> 
        </button> 
       </span> 
       <input type="text" @keyup="search(keyword)" v-model="keyword" class="form-control" placeholder="Search..."> 
      </div> 
     </div> 
    </form> 
</template> 
<script> 
export default { 
    data(){ 
     return { keyword: "" }; 
    }, 
    methods: { 
     search: function(keyword){ 
       if(keyword == ''){ 
        // Want call method fetchPost in PostHome component here 
       }else{ 

       } 
     } 
    } 
} 
</script> 

而且我有分量PostHome

<template> 
     <div> 
      <div class="box r_8 box_shadow" v-for="post in posts"> 
       <div class="box_header"> 
        <a :href="post.url"> 
         <h3 class="mg_bottom_10" v-text="post.title"></h3> 
        </a> 
        <small v-text="post.description"></small> 
        <a :href="post.url" class="box_header_readmore">Read more</a> 
       </div> 
       <div class="box_body"> 
        <a :href="post.url" v-show="post.thumbnail"> 
         <img :src="post.thumbnail" class="img_responsive" style="min-height: 300px;background-color: #f1f1f1; 
         "> 
        </a> 
       </div> 
       <div class="box_footer" v-show="post.tags.length > 0"> 
        <ul> 
         <li v-for="tag in post.tags"> 
           <a v-text="tag.name" href="javascript:void(0)"></a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
</template> 
<script> 
export default { 
    data(){ 
     return { 
      posts: null, 
     } 
    }, 
    methods: { 
     fetchPosts: function(){ 
      var url = base_url + '/user/posts' 
      this.$http.get(url).then(res => { 
       this.posts = res.data; 
      }); 
     } 
    }, 
    created: function(){ 
     this.fetchPosts(); 
    } 
} 
</script> 

我想，当用户类型KEYUP来进行搜索，那么如果

关键字= =''

调用方法fetchPost在PostHome组件的方法

Answer 1

您可以使用混合类型，如果该方法是可重复使用的。

参考：https://vuejs.org/v2/guide/mixins.html