Javascript 访问Vuejs中父组件中动态加载的组件的输入

我使用动态加载的组件在Vuejs中创建了一个向导类型的流，其中

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>

---

我需要做的是，当我单击父级

Onboarding

组件中的

Save

按钮时，以某种方式能够访问

OnboardingAccount

组件中的值，以便我可以在

changeComponent

方法或其他地方将日期写入Vuex存储。在查看调试器时，我在任何地方都看不到该值。如何做我需要做的事情？

我会保留父组件中每个组件的状态，并将它们作为道具传递，然后在输入事件时@change或@blur（或其他）发出事件。这基本上是标准组件通信，但由于您使用的是动态组件，因此在传递道具和事件时会变得有点棘手

要在某种程度上干净地将道具传递给动态组件，可以使用v-bind，但要在整个对象上，而不是在每个变量/属性上，如。此对象的属性可以是包含每个动态组件的道具的对象，这也可以保持

组件

标记干净。然后，每个动态子组件都可以从用于它的props对象中选择属性，并使用该数据。对于从子组件返回的事件，在组件标记上设置一个通用事件，例如，

childEvent

，每个动态组件将向其报告其状态的更改，因为它将返回更改的道具，这将更新父组件中的状态。保存应该很简单，因为所有数据都在父组件中

旁注： 您很好地使用了动态组件，但如果同时使用webpack的动态导入，则可以将其提升到下一个级别，这样您就不需要手动导入每个组件并将它们声明为组件。看看这个

<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>