javascript - vue3 + tsx 函数组件，编写的vue组件在父组件中使用时控制台报了如下错误，使用函数组件应该怎么编码呢？

Question

onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

import { defineComponent, ref, onMounted, reactive, Ref, SetupContext, EmitsOptions, render } from 'vue';import CustomModal from '@/components/CustomModal/index';import { ElButton } from 'element-plus';import FilterCondition from '@/views/DataQuery/Filter/index.vue';import './index.scss';type Operates = 'details' | 'split' | 'roll';interface Props {  isFrameSelect: boolean};type DataQueryEmits = {  kuangxuan: (type: string, state: boolean) => void;};function DataQuery(props: Props, cxt: SetupContext<DataQueryEmits>) {  const { slots, emit, attrs } = cxt;  const filterConditionRef = ref<typeof FilterCondition | null>(null);  /**   * 定义popover组件实例的引用集合   */  const popoverRefs: Ref<typeof NPopover | null>[] = [];  fileList.value.forEach(() => {    const popoverRef = ref<typeof NPopover | null>(null);    popoverRefs.push(popoverRef);  })  onMounted(() => {    console.log(props, slots, emit, attrs)  });  const handleSearchBarBox = () => {    emit('kuangxuan', 'KUANGXUAN', !props.isFrameSelect)  };  () => {    return (      <CustomModal        title="数据检索"        class={`tsd-data-query ${isTabs.value ? 'data-query_open' : ''}`}      >        <ElButton onClick={handleSearchBarBox}>            发射        </ElButton>      </CustomModal>    )  }};export default DataQuery;

Answer 1

setup() 里用：

import { defineComponent, ref, onMounted } from 'vue';import CustomModal from '@/components/CustomModal/index';import { ElButton } from 'element-plus';type Operates = 'details' | 'split' | 'roll';interface Props {  isFrameSelect: boolean};type DataQueryEmits = {  kuangxuan: (type: string, state: boolean) => void;};export default defineComponent({  props: {    isFrameSelect: Boolean,  },  emits: ['kuangxuan'],  setup(props: Props, { emit }) {    const handleSearchBarBox = () => {      emit('kuangxuan', 'KUANGXUAN', !props.isFrameSelect);    };    onMounted(() => {      console.log(props);    });    return () => (      <CustomModal        title="数据检索"        class={`tsd-data-query ${isTabs.value ? 'data-query_open' : ''}`}      >        <ElButton onClick={handleSearchBarBox}>          发射        </ElButton>      </CustomModal>    );  },});