Question

我正在使用 props 将一些动态数据从父组件传递到子组件。所以我想知道如何将 myColor prop添加到< em> total 值并将结果显示为最终值。我已经用父组件（形状）和子组件（颜色）

更新帖子

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

＆＃13;

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)
  }
})

＆＃13;

<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>

＆＃13;

SELECT示例：

＆＃13;

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',
    }
  }
})

＆＃13;

<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>

＆＃13;

选中/取消选中复选框的示例：

＆＃13;

var child = {
  template: '#child',
  props: ['checked']
}

Vue.component('parent', {
  template: '#parent',
  components: {
    child: child
  },
  data () {
    return {
      checkbox: false
    }
  }
})

new Vue({
  el: '#app'
})

＆＃13;

<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>

＆＃13;

Vue js动态数据组件

1 个答案: