Вывести значения свойста Vue

Question

Есть компонент календаря

<script>
import DatePick from 'vue-date-pick';
import 'vue-date-pick/dist/vueDatePick.css';

export default {
    components: {DatePick},
    data: () => ({
        date: '2019-01-01'
    })
};
</script>

И я его использую в другом компоненте подключая

<template>
  <div>
      <calendar></calendar>
  </div>
</template>

<script>
    import Calendar from './Calendar.vue';
</script>

Все успешно работает, только как в родительском компоненте вывести значение v-model="date" ?

Answer 1

Здесь подойдет событийная модель. В дочернем компоненте генерируешь событие. Например при изменении даты.

this.$emit('onChangeDate', this.date);

В родительском компоненте подписываешься на изменения из компонента:

<template>
  <div>
      <calendar @onChangeDate="onChangeDate"></calendar>
  </div>
</template>
<script>
import DatePick from 'vue-date-pick';
import 'vue-date-pick/dist/vueDatePick.css';

export default {
   methods: {
       onChangeDate(date){
          console.log('date from child component: ', date);
       }
   }
};
</script>

БЛОГ НА HUSL

Вывести значения свойста Vue

Ответы (1 шт):