Vue 3 V 模型傳遞給孫子組件
P粉731861241
P粉731861241 2024-03-26 15:37:53
0
1
543

我有三個元件,我想從父級 -> 子級 -> 孫級(vee-validate 欄位)向下傳遞響應式模型。

所以父元件看起來像:

<template>
  <child v-model="formData" />
</template>
.
.
.
setup() {
  const formData = ref<CreateAccount>({
      email: "",
      firstName: "",
      lastName: ""
  });

  return {
    formData,
  };
}

子元件(有孫元件)看起來像:

<template>
  <Field
    type="text"
    name="email"
    v-model="modelValue.email" ????
  />
</template>

export default defineComponent({
    name: "step-2",
    components: {
      Field,
    },
    props: {
      modelValue: {
        type: Object,
        required: true,
      },
    },
    emits: ["update:modelValue"],
  },
});

現在我的問題是,我不能只將 modelValue 傳遞給 Field v-model 屬性,所以我不確定是否存在一系列事件或�

P粉731861241
P粉731861241

全部回覆(1)
P粉044526217

我最終在我的子元件中使用了以下解決方案:

<template>
  <Field
    type="text"
    name="email"
    v-model="model.email"
  />
</template>

export default defineComponent({
  name: "step-2",
  components: {
    Field,
  },
  props: {
    modelValue: {
      type: Object,
      required: true,
    },
  },
  computed: {
    model: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
  },
},
});
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板