vue 父组件调用子组件时子组件自动加载方法

在Vue中，父组件可以通过`ref`属性获取子组件的实例，然后调用子组件的方法。如果需要在子组件加载时自动调用某个方法，可以使用Vue的生命周期函数`mounted`。当子组件被挂载到DOM上后，`mounted`函数会被自动调用。下面是一个示例代码：

父组件：

<template>
  <div>
    <ChildComponent ref="child"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  mounted() {
    this.$refs.child.childInfo()
  }
}
</script>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { defineExpose } from 'vue'

export default {
  data() {
    return {
      message: 'Hello from ChildComponent!'
    }
  },
  methods: {
    childInfo() {
      console.log('ChildComponent method called!')
    }
  },
  mounted() {
    console.log('ChildComponent mounted!')
  }
}

defineExpose({
  childInfo: () => {
    console.log('ChildComponent method exposed!')
  }
})
</script>

在父组件中，我们使用`ref`属性获取子组件的实例，并在`mounted`函数中调用子组件的`childInfo`方法。在子组件中，我们使用`defineExpose`函数将`childInfo`方法暴露出去，以便父组件可以调用。同时，在子组件的`mounted`函数中，我们可以看到控制台输出了`ChildComponent mounted!`，表示子组件已经被挂载到DOM上了。