Vue js Senden von Daten zwischen den Komponenten

Question

Ich würde gerne wissen, wie ich Daten zwischen zwei Komponenten senden kann. Daher möchte ich an eine andere Komponente den dynamischen Wert senden, der auf selectedBase.price gerendert und in einer anderen Komponente gerendert wird. Ich habe es mit Requisiten versucht, aber nicht erfolgreich.

<v-layout row wrap primary-title v-for="base in bases" :key="base.id"> 
     <v-layout column> 
      <v-flex xs6 offset-xs3> 
       <v-avatar size="80px" class="grey lighten-1"> 
        <img :src="base.href" :class="{selected: selectedBase.id == base.id}" @click="selectedBase = base" alt="avatar"> 
       </v-avatar> 
      </v-flex> 
     </v-layout> 
     <v-layout column> 
      <v-flex xs6 offset-xs4> 
       <v-subheader>{{base.name}} {{base.price}}€ {{selectedBase.price}}</v-subheader> 
      </v-flex> 
     </v-layout> 
    </v-layout> 

<script> 

export default { 

    data() { 
      return { 
       selectedBase: {}, 
       bases: [{ 
        id: 1, 
        name: "black", 
        price: 4, 
        href: "../../static/black.jpg" 
       }, { 
        id: 2, 
        name: "white", 
        price: 6, 
        href: "../../static/white.jpg" 
       }] 
      } 
     }, 
     computed: { 

      totalBase: function() { 
       var totalBase = 0; 
       for (var i = 0; i < this.bases.length; i++) { 
        if (this.bases[i].selected) { 
         totalBase += this.bases[i].price; 
        } 
       } 
       return totalBase; 
      } 
     }, 
     methods: { 
      getSelectedBase() { 
       return this.selectedBase; 
      } 
     } 
} 

</script> 

Answer 1

Ja, props ist der richtige Weg.

ParentComponent.vue

<template> 
    <your-component your-prop="123"></your-component> 
</template> 

<script> 
    import YourComponent from '/path/to/YourComponent' 

    export default { 
     data() { 
      return { } 
     }, 
     components { YourComponent } 
    } 
</script> 

ChildComponent.vue

<template> 
    <div>My prop is: {{ yourProp }}</div> 
</template> 

<script> 
    export default { 
     data() { 
      return { } 
     }, 
     props: ['your-prop'] 
    } 
</script> 

Sie auch Vuex können Staaten zwischen Ihrer App zu teilen, aber ich denke, es ist nicht der Fall ist.