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

我需要做的是，当我单击父 Onboarding 组件中的 Save 按钮时，我能够以某种方式访问​​ OnboardingAccount 组件中的值，以便我可以将日期写入 Vuex 存储，在我的changeComponent 方法或其他地方。在查看调试器时，我在任何地方都看不到该值。我该怎么做？

Answer 1

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

要稍微干净地将道具传递给动态组件，您可以使用 v-bind，但在整个对象上而不是每个变量/属性上，例如 here。该对象的属性可以是包含每个动态组件的道具的对象，这也使component 标记保持干净。然后每个动态子组件可以从 props 对象中挑选出适合它的属性，并使用该数据。对于从孩子返回的事件，在组件标签上设置一个通用事件，名称例如childEvent，每个动态组件将向其报告其状态的更改，因为它将返回更改的道具，这将更新父组件中的状态。然后保存应该很简单，因为所有数据都在父组件中。

旁注： 您很好地使用了动态组件，但是如果您同时使用 webpack 的动态导入，则可以将其提升到一个新的水平，那么您无需手动导入每个组件并将它们声明为组件。看看这个article。