vue3父组件无法调用子组件函数，如何解决

Z时代
2024-02-18
分类：IT

父组件

<template>
<div>
<a-table
    :columns="columns"
    rowKey="studentId"
    :data-source="data"
    :scroll="{ x: 1500, y: 480 }"
  >
    <template #action="record">
      <a @click="action(record.record)">action</a>
      <div>
        <a-modal
          title="Title"
          v-model:visible="visible"
          :confirm-loading="confirmLoading"
          @ok="handleOk"
        >
        </a-modal>
      </div>
    </template>
    <myform ref="myFormRef"/>
  </a-table>
</div>
</template>
<script>
import { ref, computed, defineComponent, onMounted } from "vue";
import { useStore } from "vuex";
import myform from '../components/myForm.vue'
export default defineComponent({
  name:'Table',
  components:{
    myform
  },
  setup() {
    const store = useStore();
    const myFormRef = ref(null)
    onMounted(() => {
      store.dispatch("getUserInfo");
    });
    const action=(record)=> {
      myFormRef.value.init(record)
      visible.value=true
    }
    const modalText = ref("Content of the modal");
    const visible = ref(false);
    const confirmLoading = ref(false);
    const handleOk = () => {
      modalText.value = "The modal will be closed after two seconds";
      confirmLoading.value = true;
      setTimeout(() => {
        visible.value = false;
        confirmLoading.value = false;
      }, 2000);
    };
    const columns = [
      {
        title: "studentId",
        width: 100,
        dataIndex: "studentId",
        key: "name",
        fixed: "left",
      },
      {
        title: "password",
        width: 100,
        dataIndex: "password",
        key: "password",
        fixed: "left",
      },
      {
        title: "longitude",
        dataIndex: "longitude",
        width: 150,
      },
      {
        title: "latitude",
        dataIndex: "latitude",
        width: 150,
      },
      {
        title: "phone",
        dataIndex: "phone",
        width: 150,
      },
      {
        title: "email",
        dataIndex: "email",
        width: 150,
      },
      {
        title: "isValid",
        dataIndex: "isValid",
        width: 150,
      },
      {
        title: "updateTime",
        dataIndex: "updateTime",
        width: 150,
      },
      {
        title: "createTime",
        dataIndex: "createTime",
        width: 150,
      },
      {
        title: "Action",
        key: "operation",
        fixed: "right",
        width: 100,
        slots: {
          customRender: "action",
        },
      },
    ];
    return {
      myFormRef,
      data: computed(() => store.state.userinfo.userInfo),
      columns,
      action,
      modalText,
      visible,
      confirmLoading,
      handleOk,
    };
  },
});</script>

子组件

<template>
<div>
 <a-form
    ref="formRef"
    :model="state.formState"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item ref="studentId" label="studentId" name="studentId">
      <a-input v-model:value="state.formState.studentId" />
    </a-form-item>
    <a-form-item ref="password" label="password" name="password">
      <a-input v-model:value="state.formState.password" />
    </a-form-item>
    <a-form-item ref="longitude" label="longitude" name="longitude">
      <a-input v-model:value="state.formState.longitude" />
    </a-form-item>
    <a-form-item ref="latitude" label="latitude" name="latitude">
      <a-input v-model:value="state.formState.latitude" />
    </a-form-item>
    <a-form-item ref="phone" label="phone" name="phone">
      <a-input v-model:value="state.formState.phone" />
    </a-form-item>
    <a-form-item ref="email" label="email" name="email">
      <a-input v-model:value="state.formState.email" />
    </a-form-item>
    <a-form-item label="isVailid" name="isVailid">
      <a-radio-group v-model:value="state.formState.isVailid">
        <a-radio value="false">无效</a-radio>
        <a-radio value="true">有效</a-radio>
      </a-radio-group>
    </a-form-item>
  </a-form>
</div>
</template>
<script>
import { reactive, ref, toRaw, defineComponent } from "vue";
export default defineComponent({
  name:'myForm',
  setup() {
    const init=(info)=>{
      state.formState = info;
    }
    const formRef = ref();
    const state = reactive({
      formState: {
        studentId: 0,
        password: "",
        longitude: 0,
        latitude: 0,
        isVailid: 0,
        email: "",
      },
    });
    const rules = {
      studentId: [
        {
          required: true,
          message: "Please input studentId",
          trigger: "blur",
        },
        {
          min: 13,
          max: 13,
          message: "Length should be 13",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "Please input password",
          trigger: "blur",
        },
      ],
      longitude: [
        {
          required: true,
          message: "Please input longitude",
          trigger: "blur",
        },
      ],
      latitude: [
        {
          required: true,
          message: "Please input latitude",
          trigger: "blur",
        },
      ],
      isVailid: [
        {
          required: true,
          message: "Please select isVailid",
          trigger: "change",
        },
      ],
      phone: [
        {
          required: true,
          message: "Please input phone",
          trigger: "blur",
        },
      ],
      email: [
        {
          required: true,
          message: "Please input email",
          trigger: "blur",
        },
      ],
    };
    const onSubmit = () => {
      formRef.value
        .validate()
        .then(() => {
          console.log("values", formState, toRaw(formState));
        })
        .catch((error) => {
          console.log("error", error);
        });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
    return {
      formRef,
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
      other: "",
      rules,
      onSubmit,
      resetForm,
      state,
      init
    };
  },
});</script>