vue3中expose应用

从react中来看的话很没道理，因为没有在定义组件中进行限制，但是从现场来看，简单了很多。

const refMorebar = ref<MoreBarExport>();
 <MoreBar
          showMore={state.showMore}
          ref={refMorebar}
          onMoreBarClick={() => {
            refMorebar.value?.reload();
            debugger;
          }}
        />

tsx

import { defineComponent } from "vue";
import css from "./index.module.less";
import morePng from "@/assets/image/extends.png";
import { makeRequiredProp } from "@/utils";

// TODO:类型
//interface StateType m
let props = {
  showMore: makeRequiredProp<Boolean>(),
};

export type MoreBarExport = {
  reload(): void;
};
const MoreBar = defineComponent({
  name: "MoreBar",
  props,
  emits: ["MoreBarClick"],
  setup(props, { emit, expose }) {
    //TODO:State
    // const state = reactive<StateType>({});

    expose({
      reload() {
        debugger;
      },
    });
    // TODO:DOM
    return () => (
      <section class={css.MoreBar}>
        <span>显示所有统计数据</span>
        <img src={morePng} onClick={() => emit("MoreBarClick")} />
      </section>
    );
  },
});
export default MoreBar;