コンポーネント間でデータを送信する

Question

2つのコンポーネント間でデータを送信する方法を知りたいと思います。ですから、selectedBase.priceでレンダリングされ、別のコンポーネントでレンダリングされる動的値を別のコンポーネントに送信したいと思います。私は小道具で試しましたが成功しません。

<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

はい、propsは正しい方法です。

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> 

また、あなたのアプリ間で状態を共有するためにVuexを使用することができますが、私はそれが当てはまらないと思います。