0
Vue.component('range-slider', {
    props: ['name', 'min', 'max'],
    template: '<div class="form-group"> ' +
                    '<label class="control-label">{{name}}</label>' +


                    '<input type="text" class="form-control" v-model="value(тут value это initialPayment, либо monthyPayment)" v-on:keypress="isNumber($event)"> ' +
                    '<vue-slider ref="slider"' +
                        'v-model="value"' +
                        ':tooltip="false"'+
                        ':min="parseInt(min, 10)"' +
                        ':max="parseInt(max, 10)">' +
                    '</vue-slider>' +
              '</div>',
    components: {
        'vueSlider': window[ 'vue-slider-component' ]
    }
});

new Vue({
    el: '.app',
    data: {
        initialPayment: 10,
        monthyPayment: 0,
    }
});

<div class="app">
    <range-slider 
      name="Текст" 
      min="10"
      max="1000"
      // Как то передать initialPayment>
   </range-slider>

    <range-slider 
      name="Текст" 
      min="10"
      max="1000">
      // Как то передать monthyPayment
    </range-slider>
</div>

Необходимо сцепить родительские данные с данными ребенка, представленного в виде компонента. А точнее с input внутри компонента. И при изменении данных в input, родительский блок понимал что изменилось например initialPayment, и запускал какой нибудь пересчет либо computed

1 ответ 1

1

Для таких целей существует генератор событий, во Vue имя ему EventBus. В проекте Вы можете создать папку events и файл index.ts в котором определить этот генератор:

export const $bus = new Vue();

Либо если Вы работаете без какого либо сборщика модулей - определите этот генератор в прототипе Vue:

Vue.prototype.$bus = new Vue();

В шаблоне дочернего компонента, повесьте обработчик события на инпут:

<input name="initialPayment" @keyup="changeInitialPayment($event.target.value)">

В компоненте определяем этот метод и генерируем событие:

methods: {
    changeInitialPayment(value) {
        this.$bus.$emit('changeInitialPayment', value);
    }
}

В родителе слушаем событие changeInitialPayment:

mounted() {
    this.$bus.$on('changeInitialPayment', (value) => {
        console.log(value);
        // Делайте что-то с новым значением `initialPayment`
    });
}
9
  • чем это отличается от обычного $emit, $on - зачем допонительная обертка
    – ruslik
    25 июл 2018 в 8:38
  • это не доп. обертка, это абстракция и подход, которые советует использовать Vue команда
    – arturovt
    25 июл 2018 в 9:14
  • @ruslik, тут тогда вопрос - в чем заключается Ваш вопрос? Если Вы знаете про генерацию событий, то какой ответ Вы хотите получить? Просто Ваш вопрос прозвучал так Необходимо сцепить родительские данные с данными ребенка, представленного в виде компонента. А точнее с input внутри компонента.
    – arturovt
    25 июл 2018 в 9:34
  • тогда вопрос в том что правильно ли я вообще делаю и нужны ли тут триггеры событий? Нельзя ли просто как-то передавать в ребенка данные, и чтобы изменения этих данных отлавливал родитель. Почему надо именно триггерить события. Я могу как-то передать в компонент данные родителя как ссылку, затем в ребенке меняются значения данных. Так как данные переданы по ссылке, родитель видит изименения этих данных и запускает свои события или обновляет вычисляемые свойства у себя
    – ruslik
    25 июл 2018 в 9:41
  • @ruslik, смотрите, здесь несколько вариантов как это реализовать, самый быстрый и простой это использовать EventBus, но если хотите еще больше разделить ответственность и абстрагировать логику - используйте Vuex, я думаю Вам не составит труда настроить его под Ваши нужды
    – arturovt
    25 июл 2018 в 9:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.