Vuejs2 将数据从组件传递到Vue.js 2.x中的父viewmodel

我只是从Vue.js开始，我对将数据从组件传递到父viewmodel/组件有多复杂感到困惑

我的用例如下：

sliderSum: function () {
  var sum = this.slider1RoundedValue * 1 + this.slider2RoundedValue * 1 + this.slider3RoundedValue * 1
  this.$emit('sliderValueHasMutated', sum)
  return sum
},

我有一个自定义的RangeSlaider组件（）。我在包装组件

Typetest.vue

中使用了其中的3个：

<template>
  <div class="typetest">
    <div :class="'slider1-val-' + slider1RoundedValue">
      <range-slider
        class="slider"
        min="1"
        max="3"
        step="0.01"
        v-model="sliderValue1">
      </range-slider>
    </div>
    <div :class="'slider2-val-' + slider2RoundedValue">
      <range-slider
        class="slider"
        min="1"
        max="3"
        step="0.01"
        v-model="sliderValue2">
      </range-slider>
    </div>
    <div :class="'slider3-val-' + slider3RoundedValue">
      <range-slider
        class="slider"
        min="1"
        max="3"
        step="0.01"
        v-model="sliderValue3">
      </range-slider>
      <p>{{ slider3Texts[slider3RoundedValue] }}</p>
    </div>
    <p>Your Choice: {{ sliderSum }}</p>
    <!-- this value needs to be passed to the parent viewmodel whenever it changes -->
  </div>
</template>
<script>
import RangeSlider from 'vue-range-slider'
import 'vue-range-slider/dist/vue-range-slider.css'

export default {
  name: 'typetest',
  data () {
    return {
      sliderValue1: 2,
      sliderValue2: 2,
      sliderValue3: 2,
    }
  },
  computed: {
    slider1RoundedValue: function() {
      return this.calcSliderValue(this.sliderValue1).toString();
    },
    slider2RoundedValue: function() {
      return (this.calcSliderValue(this.sliderValue2)*10).toString();
    },
    slider3RoundedValue: function() {
      return (this.calcSliderValue(this.sliderValue3)*100).toString();
    },
    sliderSum: function() {
      return this.slider1RoundedValue*1 + this.slider2RoundedValue*1 + this.slider3RoundedValue*1
    },
  },
  methods: {
    hello: function() { console.log(this.sliderSum); },
    calcSliderValue: function(val) {
      switch (true) {
        case val < 1.67:
          return 1
          break
        case val < 2.34:
          return 2
          break
        default:
          return 3
      }
    }
  },
  components: {
    RangeSlider
  }
}
</script>

{{Slider3Text[slider3RoundedValue]}

您的选择：{{sliderSum}

从“vue范围滑块”导入范围滑块
导入“vue范围滑块/dist/vue范围滑块.css”
导出默认值{
名称：'类型测试'，
数据（）{
返回{
SliderValue 1:2，
SliderValue 2:2，
SliderValue 3:2，
}
},
计算：{
slider1RoundedValue:函数（）{
返回this.calcSliderValue（this.sliderValue1.toString（）；
},
slider2RoundedValue:函数（）{
return（this.calcSliderValue（this.sliderValue2）*10.toString（）；
},
slider3RoundedValue:函数（）{
return（this.calcSliderValue（this.sliderValue3）*100.toString（）；
},
sliderSum:function（）{
返回此.slider1RoundedValue*1+此.slider2RoundedValue*1+此.slider3RoundedValue*1
},
},
方法：{
您好：function（）{console.log（this.sliderSum）；}，
calcSliderValue:函数（val）{
开关（真）{
病例val<1.67：
返回1
打破
病例val<2.34：
返回2
打破
违约：
返回3
}
}
},
组成部分：{
范围滑块
}
}

现在，每当计算属性sliderSum发生变化时，我都需要将结果传递给父viewmodel。然后，其他几个组件需要根据父视图模型的

sliderSum

属性进行更新，该属性在任何时候都需要与组件的计算属性同步。它在一个值中反映三个范围滑块的状态。根据这个总数，我可以在家长中决定显示哪些文本和图像

---

如何实现这一点？

好的，我通过以下方法解决了问题：

1） 我在父视图模型上添加了一个数据属性

sliderSum

， 最初放置一个空字符串

2） 我在父视图模型中添加了一个方法，该方法在调用时会更新

sliderSum

属性，并传递参数

data() {
  return {
      sliderSum: ""
  }
},
methods: {
  updateSliderValue: function(newVal) {
    this.sliderSum = newVal;
  }
}

3） 在父视图模型的模板中，每当发出事件

slidervaluasemutated

时，我传递要调用的

updateSliderValue

方法：

<typetest @sliderValueHasMutated="updateSliderValue"></typetest>

现在，每当计算属性发生更改时，它都会发出一个

slidervaluehassmutated

事件，触发父级的

updateValue（）

方法

完成了