vue3.0(ts)子组件传递多个参数时,父组件接收其他附加参数(arguments无效)
warning:
这篇文章距离上次修改已过206天,其中的内容可能已经有所变动。
在Vue 3.0 和 TypeScript 中,子组件向父组件传递多个参数时,可以使用 emit
方法。父组件可以通过监听子组件触发的事件来接收这些参数。
子组件代码示例:
<template>
<button @click="sendToParent">Send to Parent</button>
</template>
<script lang="ts">
import { defineComponent, emit } from 'vue';
export default defineComponent({
setup(props, { emit }) {
const sendToParent = () => {
emit('send', '参数1', '参数2', { 更多: '附加参数' });
};
return { sendToParent };
},
});
</script>
父组件代码示例:
<template>
<ChildComponent @send="receiveFromChild" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default defineComponent({
components: {
ChildComponent,
},
setup(props, { emit }) {
const receiveFromChild = (arg1, arg2, extra) => {
console.log(arg1, arg2, extra); // 这里会接收到子组件传递的所有参数
};
return { receiveFromChild };
},
});
</script>
在这个例子中,子组件 ChildComponent
有一个按钮,点击后会触发 sendToParent
方法,该方法使用 emit
方法向父组件发送多个参数。父组件通过监听子组件触发的 send
事件来接收这些参数。
评论已关闭