vuejs wie von Kind Methode

Question

Index von Kind zu bekommen Ich habe Komponente:

Vue.component('child', { 
    template : '#child-tpl', 
    props : { 
     child : Object 
     } 
    }, 
    methods : { 
     index : function() { 
      return ???; // current index 
     } 
    } 
}); 

Diese Kinder Neuordnungs sein kann/entfernen/hinzufügen dinamically. Brauche aktuellen aktuellen Index dieser Kinder. Wie erhält man den aktuellen Index für das Ziel-Kind des übergeordneten Kinder-Arrays?

Answer 1

Pass Index in als eine Stütze. Der Index kommt von außerhalb des Kindes, also sollte das Kind es als Requisite erhalten. Es sollte keine Methoden in einem Kind geben, die Eltern nach Informationen abfragen. Alles, was ein Kind von außen braucht, sollte ihm als Requisite übergeben werden.

Im folgenden Abschnitt wird der Index bequem von der v-for bereitgestellt.

Vue.component('child', { 
 
    template: '#child-tpl', 
 
    props: ['child', 'index'] 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    children: ['a', 'b', 'c', 'd'] 
 
    }, 
 
    methods: { 
 
    reverse: function() { 
 
     this.children.reverse(); 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script> 
 
<template id="child-tpl"> 
 
<div>I'm {{child}}, {{index}}</div> 
 
</template> 
 

 
<div id="app"> 
 
    <child v-for="(child, index) in children" :child="child" :index="index"></child> 
 
    <button @click="reverse">Reverse</button> 
 
</div>