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组件中的值，以便我可以编写可以使用我的changeComponent方法或其他方式来查询Vuex商店的日期。在查看调试器时，我在任何地方都看不到该值。我该怎么做？

Answer 1

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

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

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

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

1 个答案: