Можно ли получить данные из дочернего компонента?

Question

[Zhanna_K]

Делаю большую форму, вынесла элементы группы радиокнопок и чекбокса в отдельные компоненты с расчетом на то, что это сделает код более лаконичным.
Как теперь при кликах на них, получить данные в App, где собственно и хранятся все данные формы?
И вообще, возможно ли это или лучше все элементы формы держать в одном темплэйте?
Вот структура проекта:

• App.vue
  
• Components/
  
  • CustomRadioGroup.vue
    
  • ToggleBtn.vue
    
  
  
  

ToggleBtn

<template>
<label class="slider-container" style="width:40px, height:20px">
    <input type="checkbox" name="unsubscribe" value="true" />
    <span class="round"></span>
</label>
</template>

CustomRadioGroup

<template>
<div>
    <span class="group">
        <label class="container">
            <input id="male" name="sex" type="radio" value="муж" /><span class="checkmark"></span></label>

        <label for="male" class="title">Мужчина</label></span>

    <span class="group">
        <label class="container">
            <input id="female" name="sex" type="radio" value="жен" /><span class="checkmark"></span></label>
        <label for="female" class="title">Женщина</label>
    </span>
</div>
</template>

App.vue (Фрагмент)

<input id="phone_number" name="phone_number" type="text" placeholder="[phone]" v-model.trim="phone_number" />
            <label for="phone_number">Телефон</label>
            <div class="radioBox">
                <!-- <CustomRadio v-model="sex" />   --> кастомная радиогруппа
            </div>
            <select class="clientGroup">
                <option>VIP</option>
                <option>Проблемные</option>
                <option>ОМС</option>
            </select>
            <span class="clientGroup_tip">Группа клиентов</span>
            <select class="clientDoctor">
                <option>Захаров</option>
                <option>Чернышева</option>
                <option>Иванов</option>
            </select>
            <span class="clientDoctor_tip">Лечащий врач</span>
            <div class="checkBox">
                <!-- <ToggleButton /> -->  кастомный чекбокс
                <span>Не отправлять СМС</span>
            </div>

Answer 1

[Alex]

ну, вот как то так и получать
<CustomRadio v-model="sex" />

Дочерние компоненты принимают дефолтное значение, и по клику стреляют событием с новым значением, которое уже принимает и сохраняет родитель.

Comments

[Zhanna_K]

конечно, я так и написала, но данные не приходят)

[Alex]

Zhanna_K, Ну, это уже второй, вопрос реализации внутренних компонентов :)

[Zhanna_K]

значит я не умею формулировать, но я старалась, честно!
что нужно прикрутить в input, который находится в отдельном компоненте, чтобы его value передалось "вверх" в App?

[Alex]

Zhanna_K, https://ru.vuejs.org/v2/guide/components.html#%D0%...

Следовательно, ToggleBtn должен быть примерно таким (при условии что вы используете Vue 2):

<template>
<label class="slider-container" style="width:40px, height:20px">
    <input type="checkbox" name="unsubscribe" :value="value" v-on:input="$emit('input', $event.target.value)" />
    <span class="round"></span>
</label>
</template>

[VegasChickiChicki]

Zhanna_K, Покажите полный код компонента CustomRadioGroup.

[Alex]

Zhanna_K,

Покажите полный код компонента CustomRadioGroup.

А лучше всего сразу такие штуки загружайте в песочницу

[Zhanna_K]

Alex Спасибо! В итоге получилось!
оказалось, что нужно еще прописывать model для каждого

<input id="male" name="sex" type="radio" value="муж" v-bind:checked="checked" @change="$emit('change', $event.target.value)" />

и

<input type="checkbox" name="unsubscribe" value="true" v-bind:checked="checked" @change="$emit('change', $event.target.checked)" />

Answer 2

[Игорь]

Привожу пример рабочего компонента.
Обратите внимание на

model: {
    prop: 'selected',
    event: 'change'
  },

<template>
  <v-autocomplete
    v-model="selected"
    :items="users"
    :search-input.sync="usersSearchQuery"
    persistent-hint
    :label="label"
    :rules="rules"
    :loading="loading"
  >
    <template
      v-slot:prepend
      v-if="visibleIcon && ['lg', 'md'].includes($vuetify.breakpoint.name)"
    >
      <v-icon class="pl-5 pr-9">mdi-account-tie</v-icon>
    </template>
    <template v-slot:selection="{ attr, on, item }">
      <span>{{ item.first_name }} {{ item.last_name }}</span>
    </template>
    <template v-slot:item="{ item }">
      <v-list-item-avatar
        color="indigo"
        class="headline font-weight-light white--text"
      >
        {{ item.first_name.charAt(0) }}
      </v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title>{{ item.first_name }} {{ item.last_name }}</v-list-item-title>
        <v-list-item-subtitle
          v-if="item.role"
          v-text="item.role.name"
        ></v-list-item-subtitle>
      </v-list-item-content>
    </template>
  </v-autocomplete>
</template>

<script lang="ts">
import Vue from 'vue'
import { debounce } from 'vuetify/src/util/helpers'
import { Users } from '@/api/Users'

export default Vue.extend({
  name: 'UserAutocomplete',
  model: {
    prop: 'selected',
    event: 'change'
  },
  props: {
    selectedId: {
      type: Number,
      default: 0
    },
    search: {
      type: String,
      default: ''
    },
    rules: {
      type: Array,
      default: undefined
    },
    visibleIcon: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      loading: false,
      selectOnce: false,
      selected: null,
      usersSearchQuery: null,
      usersProcessLoading: false,
      usersSearchDebounce: debounce((q: string) => {
        this.loading = true
        new Users().findUsers(q)
          .then(({ count, items }) => {
            this.users = items

            if (this.selectOnce === false) {
              this.selectOnce = true
              this.selected = this.users.find((e) => e.id === this.selectedId)
              console.log(this.selectedId, this.users)
              console.log(this.selected)
            }
          }).finally(() => {
            this.loading = false
          })
      }, 400),
      users: []
    }
  },

  watch: {
    selected (value) {
      this.$emit('change', value)
    },

    usersSearchQuery (val: string) {
      this.usersSearchDebounce(val)
    }
  },

  created () {
    this.usersSearchQuery = this.search
  }
})
</script>

Comments

[Zhanna_K]

спасибо, уже решила вопрос)