父组件初始化vue-tour时，如何指向子组件内的元素？

你的父组件代码：

<template>
  <div>
      <q-card id="scrollBody" class="detail-page-wrap" @scroll="handleScroll">
      <childComponent />
      </q-card>
  </div>
</template>

问题核心是父组件挂载时，子组件的DOM还未完全渲染完成，此时初始化vue-tour自然找不到子组件内的目标元素。以下是几种可行的解决办法：

• 延迟初始化向导
  给子组件留足渲染时间，通过setTimeout延迟启动tour：

  mounted() {
    setTimeout(() => {
      this.$tours['myTour'].start()
    }, 300) // 时间可根据实际渲染耗时调整
  }
  

• 监听子组件渲染完成事件
  让子组件在自身挂载完成后通知父组件，父组件再启动tour：
  子组件代码：

  mounted() {
    this.$emit('child-rendered')
  }
  

  父组件修改：

  <template>
    <div>
        <q-card id="scrollBody" class="detail-page-wrap" @scroll="handleScroll">
        <childComponent @child-rendered="startTour" />
        </q-card>
    </div>
  </template>
  
  <script>
  export default {
    methods: {
      startTour() {
        this.$tours['myTour'].start()
      }
    }
  }
  </script>
  

• 利用$nextTick确保DOM更新完成
  如果子组件是同步渲染的，用Vue的$nextTick等待DOM更新后再启动：

  mounted() {
    this.$nextTick(() => {
      this.$tours['myTour'].start()
    })
  }
  

  注意：若子组件依赖异步数据渲染，$nextTick可能不够，需等数据加载完成后再执行初始化。

• 检查子组件目标元素的ID
  确保子组件内的目标元素设置了静态且唯一的ID，避免使用未赋值的动态ID（比如v-bind:id绑定的变量还未初始化时，ID会不存在）。

内容的提问来源于stack exchange，提问作者Kanika Gupta