Vue的JS動態數據組件

Question

我從父組件傳遞一些動態數據使用道具子組件。所以我想知道我怎麼可以添加myColor道具總價值和展示它將結果呈現爲最終值。 我已經使用父組件（形狀）和子組件（顏色）更新了帖子

我正在使用Vue 2和webpack。

//parent component 

<v-layout row wrap primary-title v-for="shape in shapes" :key="shape.id"> 
     <v-layout column> 
      <v-flex > 
       <v-subheader>{{shape.name}} {{shape.price}}€ {{selectedShape.price}}</v-subheader> 
      </v-flex> 
     </v-layout> 
    </v-layout> 
     <my-colors :myShape="selectedShape.price"></my-colors> 

<script> 

import Colors from './Colors.vue'; 

export default { 

    components: { 
     Colors 
    }, 

    data() { 

     return { 
      selectedShape: {}, 
      shapes: [{ 
       id: 1, 
       name: "Square", 
       price: 4, 
       href: "../../static/square.jpg" 
      }, { 
       id: 2, 
       name: "Circle", 
       price: 6, 
       href: "../../static/circle.jpg" 
      }] 
     } 
    }, 

    computed: { 

     totalShape: function() { 
      var totalShape = 0; 
      for (var i = 0; i < this.shapes.length; i++) { 
       if (this.shapes[i].selected) { 
        totalShape += this.shapes[i].price; 
       } 
      } 
      return totalShape; 
     } 
    }, 
    methods: { 
     getSelectedShape() { 
       return this.selectedShape; 

      }, 
    } 
} 

</script> 


//child component 
    <v-layout> 
       <v-layout> 
        <v-flex > 
         <h3 >Total price:</h3> 
        </v-flex> 
       </v-layout> 
       <v-layout> 
        <v-flex 
         <v-subheader> {{total}} {{myShape}} €</v-subheader> 
        </v-flex> 
       </v-layout> 
      </v-layout> 

     <script> 

      export default { 
       props: ['myShape'], 

       data:() => ({ 

        checked1: '', 
        showCart: false, 
        colors: [{ 
         id: 1, 
         name: "white", 
         price: 2, 
         checked: '', 
        }, { 
         id: 2, 
         name: "black", 
         price: 2.0, 
         checked: '', 
        }, { 
         id: 3, 
         name: "Grey", 
         price: 2.25, 
         checked: '', 
        }, { 
         id: 4, 
         name: "Blue", 
         price: 1.6, 
         checked: '', 
        }, { 
         id: 5, 
         name: "Red", 
         price: 2.5, 
         checked: '', 
        }, { 
         id: 6, 
         name: "Yellow", 
         price: 2.75, 
         checked: '', 
        }], 
       }), 

       computed: { 

        total: function() { 
         var total = 0; 
         for (var i = 0; i < this.colors.length; i++) { 
          if (this.colors[i].checked) { 
           total += this.colors[i].price; 
          } 
         } 
         return total; 
        }, 
       }, 
      } 

      </script> 

Answer 1

我不明白您的需求，但請注意Vue中的單向數據流。因此，您可以將數據從父組件發送到子組件，其中子組件可以通過道具訪問，但不能從子組件訪問父組件。如果您需要組件之間的雙向數據流，請使用Vuex。

var child = { 
 
    template: '#child', 
 
    props: ['fromParent'] 
 
} 
 

 
Vue.component('parent', { 
 
    template: '#parent', 
 
    components: { 
 
    child: child 
 
    }, 
 
    props: ['fromInstance'] 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    instanceData: { 
 
     text: 'Original value' 
 
    } 
 
    }, 
 
    created() { 
 
    var self = this 
 
    setTimeout(_ => self.instanceData.text = 'Changed value', 3000) 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <parent :from-instance="this.instanceData"></parent> 
 
</div> 
 

 
<template id="parent"> 
 
    <div> 
 
    <child :from-parent="this.fromInstance"></child> 
 
    </div> 
 
</template> 
 

 
<template id="child"> 
 
    <p>{{this.fromParent.text}}</p> 
 
</template>

實施例與SELECT：

var child = { 
 
    template: '#child', 
 
    props: ['selected'] 
 
} 
 

 
Vue.component('parent', { 
 
    template: '#parent', 
 
    components: { 
 
    child: child 
 
    }, 
 
    props: ['options'], 
 
    data() { 
 
    return { 
 
     parentCar: 'none' 
 
    } 
 
    }, 
 
    methods: { 
 
    update (e) { 
 
     this.parentCar = e.target.value 
 
    } 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    items: { 
 
     audi: 'Audi', 
 
     bmw: 'BMW', 
 
     mercedes: 'Mercedes', 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <parent :options="this.items"></parent> 
 
</div> 
 

 
<template id="parent"> 
 
    <div> 
 
    <select @change="update"> 
 
     <option value="none" selected>Car</option> 
 
     <option v-for="(value, key) in options" :value="key"> 
 
     {{ value }} 
 
     </option> 
 
    </select> 
 
    <child :selected="this.parentCar"></child> 
 
    </div> 
 
</template> 
 

 
<template id="child"> 
 
    <p>{{ selected }}</p> 
 
</template>

實施例與檢查/未選中的複選框：

var child = { 
 
    template: '#child', 
 
    props: ['checked'] 
 
} 
 

 
Vue.component('parent', { 
 
    template: '#parent', 
 
    components: { 
 
    child: child 
 
    }, 
 
    data() { 
 
    return { 
 
     checkbox: false 
 
    } 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app' 
 
})

<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <parent></parent> 
 
</div> 
 

 
<template id="parent"> 
 
    <div> 
 
    <input type="checkbox" v-model="checkbox"> 
 
    <child :checked="this.checkbox"></child> 
 
    </div> 
 
</template> 
 

 
<template id="child"> 
 
    <p>{{ checked }}</p> 
 
</template>