vue3父組件無法調用子組件函數,如何解决

segmentfault 2022-01-08 00:51:52 阅读数:671

vue3 vue 何解 解决

父組件

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

報錯如下
image.png
父組件Table需要調用子組件myForm的init方法,同時傳入參數.....但是報錯,如何解决



其他答案1:

在子組件中用defineExpose暴露出去formRef


其他答案2:

總覺得你是在子組件為渲染的情况下調用的結果
試試在調用子組件的方法上套上$nextTick

版权声明:本文为[segmentfault]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201080051518272.html