2017-06-19 20 views
0

Vueで他のメソッドを呼び出す方法は?vueの他のコンポーネントを呼び出す

ユーザータイプからkeyupはその後、もし

キーワードを検索したときに、私は=欲しい私はコンポーネント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> 

を持っています= ''

PostHomeコンポーネントで

呼び出し方法fetchPost方法

+2

https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication – wostex

+0

ます。またVuexを使用して記事を取得し、挿入するアクションを派遣することができます状態で突然変異を起こしている。 https://vuejs.org/v2/guide/state-management.html –

+0

ありがとうございます。私はバスを使っています。$ emitとbus。$ on。それは私と一緒に働いています。 –

答えて

0

その方法は再利用可能である場合は、ミックスインを使用することができます。

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

+0

ありがとうございます。私はバスを使っています。$ emitとバス。$ on。それは私と一緒に働いています。 –

関連する問題