Funkcja przekazu Vue.js jako rekwizyt i wywołanie funkcji podrzędnej z danymi

Question

Mam komponent listy wpisów i komponent poczty.

Przekazuję metodę wywoływania z listy postów do komponentu wiadomości, więc po kliknięciu przycisku zostanie ona wywołana.

Ale chcę przekazać identyfikator pocztowy gdy ta funkcja jest kliknął

Kod:

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> 
 
    ` 
 
}

jak widać w składniku post masz kliknięcie, które prowadzi metoda, którą dostał od podpory, chcę dodać zmienną do tej metody.

Jak to zrobić?

Answer 1

Normalnie obsługi click wydarzenie otrzyma zdarzenie jako pierwszy argument, ale można użyć bind powiedzieć funkcję co do korzystania ze swojej this i pierwszego argumentu (ów):

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

Aktualizowane odpowiedź:: Jednak może być bardziej proste (i jest to bardziej Vue-standard), aby dziecko emit wydarzenie i rodzic go obsługiwać.

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>