-
原本是将逻辑写在子组件中，为了解耦方便维护。将子组件改为展示组件。父组件作为容器组件。并将子组件原有的逻辑抽离到封装成hook。然后在父组件中引入。
-
由于子组件使用的是vant的tab组件。 其中用到了before-change的属性。该参数说明是 “切换标签前的回调函数，返回
false可阻止切换，支持返回 Promise”； 如果我在子组件中写逻辑。没有任何问题。可以同步或异步。 -
但我现在通过emit的方法去触发父组件中的function，并且希望得到父组件函数的回调用作子组件返回。 记录一下两种实现方案
- 通过props将父组件中函数直接传递给子组件。没什么毛病，但我觉得不够优雅。而且vue也不推荐。
- 通过emit事件去触发。
<template>
<van-tabs :before-change="handleTabsBeforeChange"></van-tabs>
</template>
<script>
import { defineComponent, ref, emits } from 'vue';
export default defineComponent({
emits: ["tabs-before-change"],
setup() {
const handleTabsBeforeChange = async (name: number | string): boolean | Promise<boolean> => {
let resBool = true;
await new Promise<void>(resolve => {
ctx.emit("tabs-before-change", (val: boolean) => {
resBool = val;
resolve();
});
});
console.log("resBool", resBool)
return resBool;
}
return {
handleTabsBeforeChange,
};
},
});
</script>
