将数据从组件传递到Vue.js 2.x中的父视图模型

Question

我刚刚开始使用Vue.js，对于将数据从组件传递到父视图模型/零件。

我的用例，如下：

我有一个自定义rangeslider组件（https://www.npmjs.com/package/vue-range-slider）。我使用的这3个在包装组件Typetest.vue：

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

现在，每当计算财产sliderSum变异，我需要将结果传递给父视图模型。其他几个组件则需要根据父视图模型的sliderSum属性进行更新，该属性始终需要与组件的计算属性保持同步。它将三个范围滑块的状态反映在一个值中。根据这个总和，我可以在父母中决定显示哪些文本和图像。

我该怎么做到这一点？

Answer 1

好吧，我解决了这个问题做如下：

1）我父视图模型增加了数据属性sliderSum， 最初把一个空字符串。

2）我向父视图模型添加了一个方法，该方法在调用传递参数时更新sliderSum属性。

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

3）在我的父视图模型的模板，我传递给被称为updateSliderValue方法每当一个事件sliderValueHasMutated被发射：

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

4）Typetest.vue部件内部，我改变了（indepent，尽管名称相同）计算的属性sliderSum如下：

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

所以现在，只要计算出的道具erty会发生变化，它会发出触发父级的updateValue()方法的事件sliderValueHasMutated。

完成！