小编Mwh*_*r91的帖子

VueJs 3 将事件从孙组件发送到他的祖父母组件

我对 Vue 比较陌生,正在开发我的第一个项目。我正在努力创建一个包含多个子组件和孙组件的表单。我遇到了一个问题,我需要能够生成表单的多个副本。因此,我将一些数据属性上移了 1 级。目前,形式为ApplicationPage.Vue > TheApplication.Vue > PersonalInformation.Vue > BaseInput.Vue。我的问题是我需要通过 TheApplication 发出从 PersonalInformation 到 ApplicationPage 的更改。我很难弄清楚如何处理这种情况。我一直在寻找 Vue2 的解决方案,但没有找到 Vue3 的解决方案。

应用程序页面.vue

template
      <TheApplication :petOptions="petOptions"
                      :stateOptions='stateOptions'
                      v-model="data.primary"
                      applicant="Primary"/>

script
data() {
    return {
      data: {
        primary: {
          personalInformation: {
            first_name: "",
            middle_name: "",
            last_name: "",
            date_of_birth: "",
            phone: null,
            email: "",
            pets: "",
            driver_license: null,
            driver_license_state: "",
            number_of_pets: null,
            additional_comments: ""
          },
        },
      },
    }
  },
Run Code Online (Sandbox Code Playgroud)

应用程序.Vue

            <personal-information :petOptions="petOptions"
                                  :stateOptions='stateOptions'
                                  :personalInformation="modelValue.personalInformation"
                                  @updateField="UpdateField"
            />
Run Code Online (Sandbox Code Playgroud)
  methods: {
    UpdateField(field, value) {
      this.$emit('update:modelValue', {...this.modelValue, …
Run Code Online (Sandbox Code Playgroud)

vue.js vue-component vuejs3

6
推荐指数
2
解决办法
6913
查看次数

标签 统计

vue-component ×1

vue.js ×1

vuejs3 ×1