Vue.js関数を小道具として渡し、子供がデータでそれを呼び出すようにする

Question

私は投稿リストコンポーネントと投稿コンポーネントを持っています。

ポストリストからポストコンポーネントにコールするメソッドを渡すので、ボタンがクリックされると呼び出されます。この機能をクリックしたときに

は、しかし、私はポストIDを渡したい

コード：あなたはポスト・コンポーネントに見ることができるようにあなたが実行され、クリックを持って

let PostsFeed = Vue.extend({ 
 
    data: function() { 
 
     return { 
 
      posts: [....] 
 
     } 
 
    }, 
 
    template: ` 
 
     <div> 
 
     <post v-for="post in posts" :clicked="clicked" /> 
 
     </div> 
 
    `, 
 
    methods: { 
 
     clicked: function(id) { 
 
     alert(id); 
 
     } 
 
    } 
 
    } 
 
          
 
    let Post = Vue.extend({ 
 
    props: ['clicked'], 
 
    data: function() { 
 
     return {} 
 
    }, 
 
    template: ` 
 
     <div> 
 
     <button @click="clicked" /> 
 
     </div> 
 
    ` 
 
}

彼が小道具から得た方法で、そのメソッドに変数を追加したいと思います。

どうすればよいですか？

Answer 1

通常は、clickイベントハンドラは、最初の引数としてイベントを受信しますが、あなたはそのthisと、最初の引数（複数可）の場合に使用する機能を伝えるためにbindを使用することができます。

:clicked="clicked.bind(null, post) 

を更新しましたAnswer：しかし、子供にemitというイベントを持ち、親にそれを処理させる方が簡単かもしれません（もっとVue標準です）。

let Post = Vue.extend({ 
 
    template: ` 
 
     <div> 
 
     <button @click="clicked">Click me</button> 
 
     </div> 
 
    `, 
 
    methods: { 
 
    clicked() { 
 
     this.$emit('clicked'); 
 
    } 
 
    } 
 
}); 
 

 
let PostsFeed = Vue.extend({ 
 
    data: function() { 
 
    return { 
 
     posts: [1, 2, 3] 
 
    } 
 
    }, 
 
    template: ` 
 
     <div> 
 
     <post v-for="post in posts" @clicked="clicked(post)" /> 
 
     </div> 
 
    `, 
 
    methods: { 
 
    clicked(id) { 
 
     alert(id); 
 
    } 
 
    }, 
 
    components: { 
 
    post: Post 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: 'body', 
 
    components: { 
 
    'post-feed': PostsFeed 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> 
 
<post-feed></post-feed>