Получить данные из компонента vue

Question

Добавил в свой проект на vue.js компонент datepicker:

Vue.component('d_picker', {
data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: 'Today',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: 'Yesterday',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: 'A week ago',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value1: '',
    };
  },

  template:` 
          <div>
            <div class="block">
              
              <el-date-picker
                  v-model="value1"
                  type="datetime"
                  placeholder="Дата и время события">
              </el-date-picker>
            </div>
            
          </div>
        `
        })

Столкнулся с проблемой - обновление данных в переменной value1 должно повлечь за собой реактивное обновление данных в переменной основного моего приложения (app.my_date), а компонент видит переменные только внутри себя (не могу к v-model сразу привязать целевую переменную) и я не знаю как мне обратиться к содержимому переменной в компоненте...

Подскажите, пожалуйста, какие есть варианты реализации

Answer 1

При использовании на компоненте v-model делает следующее:

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

Чтобы это действительно работало, элемент <input> внутри компонента должен:

Привязывать значение атрибута value к входному параметру value

По событию input генерировать собственное пользовательское событие input с новым значением. Вот так:

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

Пример:

Vue.component('d-picker', {
  props: ['value'],
  template: ` 
  <fieldset>
   <legend>Дочерний компонент d-picker</legend>
   <input type="date" :value="value" @input="$emit('input', $event.target.value)">
   </fieldset>`
})

new Vue({
  el: '#app',
  data: {
    date: '2020-09-16'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <fieldset>
    <legend>Родительский компонент</legend>
    {{ date }}
    <d-picker v-model="date"></d-picker>
  </fieldset>
</div>

Больше об использовании компонентов и v-model на компонентах в руководстве vue - Основы компонентов

БЛОГ НА HUSL

Получить данные из компонента vue

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