Доступ к входу из динамически загруженного компонента в родительском компоненте в Vuejs

Question

Я создал поток типа мастера в Vuejs с использованием динамически загружаемых компонентов, где кнопка Save находится в родительском компоненте, а все текстовые поля находятся в загруженных компонентах.Когда нажата кнопка Save, мне нужно выполнить две вещи:

1) Загружен следующий компонент (в настоящее время работает) 2) Получить данные из текстовых полей в дочернем компоненте и записатьих в мой магазин Vuex.

Вот код для родительского компонента:

<template>
<div>
  <component :is="selectedComponent"></component>
  <span @click="changeComponent(selectedComponent)" class="action button save">Save</span>
</div>
</template>

<script>
import auth from '@/api//auth'
import Establishment from '@/onboarding/components/OnboardingEstablishment.vue'
import Account from '@/onboarding/components/OnboardingAccount.vue'
import Vendor from '@/onboarding/components/OnboardingVendors.vue'
import Location from '@/onboarding/components/OnboardingLocation.vue'
import Menu from '@/onboarding/components/OnboardingMenu.vue'

export default {
  data () {
    return {
      accountName: '',
      selectedComponent: 'account'
    }
  },
  components: {
    establishment: Establishment,
    account: Account,
    vendor: Vendor,
    location: Location,
    appMenu: Menu
  },
  methods: {
    changeComponent (current) {
      // Mapping object to map what the next component should be
      // when changing the dynamic component.
      const componentFlow = {
        account: 'establishment',
        establishment: 'location',
        location: 'vendor',
        vendor: 'appMenu'
      }
      // Get the name of the next component.
      var nextComponent = componentFlow[current]
      this.selectedComponent = nextComponent
      // We also need to update Vuex with the value from the text field.
    },
    updateState () {
      // Write the data from the element to the state.
    }
  },
  mounted () {
    // Get name of logged in user.
    auth.getAccountDetails()
      .then(response => {
        this.accountName = response.data.email
      })
  }
}
</script>

И в качестве примера, вот OnboardingAccount.vue, один из динамически загружаемых компонентов:

<template>
  <div>
    <h1>Hey {{ accountEmail }}</h1>
    <p>Let's start at the top.</p>
    <p>What do you want to name your Account?</p>
    <input :value="accountName" type="text" />
    <p>Note: Your account name is the top level of your management. Additional teams or establishments can be added under this account name.</p>
  </div>
</template>

<script>
import auth from '@/api/auth'
import Establishment from '@/onboarding/components/OnboardingEstablishment.vue'
import Account from '@/onboarding/components/OnboardingAccount.vue'
import Vendor from '@/onboarding/components/OnboardingVendors.vue'
import Location from '@/onboarding/components/OnboardingLocation.vue'

export default {
  data () {
    return {
      accountEmail: '',
      accountName: ''
    }
  },
  components: {
    establishment: Establishment,
    account: Account,
    vendor: Vendor,
    location: Location
  },
  mounted () {
    // Get name of logged in user.
    auth.getAccountDetails()
      .then(response => {
        this.accountEmail = response.data.email
      })
  }
}
</script>

Мне нужно как-то получить доступ к значению из компонента OnboardingAccount, когда я нажимаю кнопку Save в родительском компоненте Onboarding, чтобы я мог записать дату вхранилище Vuex, либо в моем методе changeComponent, либо в другом месте.Глядя на отладчик, я нигде не вижу этого значения.Как я могу сделать то, что мне нужно сделать?

Answer 1

Я бы сохранял состояние для каждого компонента в родительском компоненте и передавал их как реквизиты, а затем при входных событиях @change или @blur (или других) генерировал событие.По сути, это стандартное взаимодействие компонентов, но поскольку вы используете динамические компоненты, это становится немного сложнее при передаче реквизитов и событий.

Чтобы передать пропускам динамические компоненты довольно чисто, вы можете использовать v-bind,но для целого объекта вместо каждой переменной / свойства, например здесь .Свойства этого объекта могут быть объектами, содержащими реквизиты для каждого динамического компонента, также это поддерживает тег component в чистоте.Затем каждый динамический дочерний компонент может выбрать свойство из объекта props, который предназначен для него, и использовать эти данные.Для события, возвращаемого потомками, установите общее событие в теге компонента, например, имя childEvent, которому каждый динамический компонент будет сообщать об изменении своего состояния, так как при этом он будет возвращать измененные реквизиты, что будет обновлять состояние вродительский компонент.Сохранение должно быть простым, так как все данные находятся в родительском компоненте.

Примечание: вы хорошо используете динамические компоненты, но можете перейти на следующий уровень, если вы используете динамический импорт веб-пакетов вместе с ним,тогда вам не нужно будет вручную импортировать каждый из них и объявлять их как компоненты.Взгляните на эту статью .