项目场景:
这里记录一次vue3使用过程当中,使用 emit 来实现子组件调用父组件的方法这个过程中自己踩的雷
项目环境使用的是 vue3 + TS
这里实际的业务场景是在一个 vue 组件中使用了一个 form 表单,form表单中调用了父组件的方法
问题描述
使用 emit 来实现子组件调用父组件的方法
子组件传参父组件接收的是 undefined
首先先把 vue3+ts+vben 中的代码贴出来
<!--father-->
<template>
<div>
<div class="bg-white mb-2 p-4">
<!--中间省略掉的是其他的业务代码-->
<InputForm
@register="registerDrawer"
@success="getData({})"
:customerOptions="customers"
@updateSite='updateMySite()'
@changeMessage='changeMyMessage'
/>
</div>
</template>
<script lang="ts" setup>
import ......
// customerOptions
const customers= reactive([] as any[]);
customerList().then((res) => {
res.list.forEach((element) => {
console.log('here is form component');
customers.push({ value: element.id, label: element.name });
});
});
console.log(customers);
const updateMySite= (customerId: string,siteOptionsArr: Array) => {
console.log('这里的方法执行了123456');
console.log(customerId);
console.log(siteOptionsArr);
};
function changeMyMessage(data,siteOptionsArr: Array) {
console.log('父组件的事件被触发了',data)
console.log('父组件的事件被触发了',siteOptionsArr)
}
</script>
其中 :customerOptions 是父组件向子组件传的值
updateSite 以及 changeMessage 是绑定在子组件上的事件,可以在子组件当中通过 emit 来调用父组件的函数
@updateSite='updateSite()'
这里的写法中, updateSite 后面跟上了小括号,这会是导致子组件调用父组件函数传递的参数父组件中接收到不到
@changeMessage='changeMessage'
这样子写才是对哒
<!--child-->
<script lang="ts" setup>
import { defineComponent, defineProps } from 'vue';
import { ref, computed, reactive } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { router } from '/@/router';
import { Icon } from '/@/components/Icon';
import { BasicForm, FormSchema, useForm } from '/@/components/Form';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
// 这里通过 defineProps 来获取 父 -- > 子 的传值
// 记得需要先 import { defineProps } from 'vue';
const props = defineProps({
customerOptions: {
type: Array,
},
});
// 这里通过 defineEmits 来讲事件 emm 注册 ? 绑定 ? 到 emit 对象上
// 这里好像是没有 import from vue 就能用来着
const emit = defineEmits(['success', 'register','updateSite','changeMessage']);
const siteOptions = reactive([] as any[]);
// 这里是在子组件的某个函数内,调用父组件的 changeMessage and updateSite
const handleCustomerChange = (value: string) => {
console.log(typeof value)
emit('changeMessage', value,siteOptions) // 会发现这里的参数传过去了
emit('updateSite', value,siteOptions) // 会发现这里的参数没有传过去
};
</script>
原因分析:
子组件调用父组件的函数,父组件却接收不到子组件调用函数时候传递的参数 !!! :
使用 @ 绑定函数的时候不要 ! 不要 !! 不要 !!! 不要 !!! 加括号