將數據從組件傳遞到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。

完成！