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事件處理程序將接收事件作爲第一個參數，但可以使用bind告訴函數使用何種其this和第一個參數（S）：

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

更新回答：但是，它可能更簡單（並且更符合Vue標準），讓子項emit成爲事件，並由父級處理它。

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>