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中数据流的一种方式。 因此，您可以将数据从父组件发送到子组件，在子组件中可以通过prop进行访问，但不能从子组件发送到父组件。 如果您需要组件之间的双向数据流，请使用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>