vue3 如何再子组件渲染完毕后再执行事件

在Vue 3中，如果你想在子组件渲染完成后执行某个事件，你可以利用`mounted`生命周期钩子。`mounted`是在组件实例挂载到DOM树上并且所有的属性以及数据都已经初始化之后调用的，这个时候你可以安全地处理DOM操作或者执行依赖DOM的事件绑定。

例如，假设你有一个子组件`ChildComponent.vue`，你想在组件加载完成后触发一个事件，可以在子组件里这样写：

<template>
  <div ref="myRef">这是子组件的内容</div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      // 当子组件DOM结构稳定后，执行事件绑定或其他DOM操作
      this.myCustomEvent();
      this.$emit('childDoneRendering');
    });
  },
  methods: {
    myCustomEvent() {
      // 在这里添加你的事件处理逻辑
    }
  }
};
</script>

在这个例子中，我们使用了`$nextTick`等待DOM更新完成后再执行自定义事件。如果需要立即执行而不需要DOM变化后的动作，可以直接使用`this.$emit('childDoneRendering')`来触发自定义事件，让父组件监听这个事件并在适当的时候处理。