vue3通过ref调用子组件的方法

父组件

import { ref, onMounted, watchEffect, toRefs, reactive } from 'vue'

const month = ref(null)

const state = reactive({
  getOnceTable: null,
})

watchEffect(() => {
  // 拿到子组件的一些数据
  const obj = toRefs(month.value)
  // 本页面定义方法
  state.getOnceTable = obj.getOnceTable
})

子组件

// defineExpose 
import { ref, defineExpose } from 'vue'

// 父组件props
let props = defineProps({
  searchParams: {
    type: Object,
    default: {}
  }
})
console.log(props.searchParams, 'searchParamssearchParamssearchParams');

// 初始化
const getOnceTable = async () => {

  if (props.searchParams.showType === '1') {
    currentTableDateType.value = 'month'

    const data = await Api.queryDetailTotalMileage({
      // 初始化
    console.log(data, 'datadata');
  })
  }
}

getOnceTable()

defineExpose({
  getOnceTable,
})

你可能感兴趣的:(vue3,vue.js,javascript,前端)