如何在挂载期间获取嵌套子组件中的 div - Vue.js

Posted 2023-02-23

【中文标题】如何在挂载期间获取嵌套子组件中的 div - Vue.js

【英文标题】：How to get div in nested child component during mounted - Vue.js

【发布时间】：2020-02-02 14:54:38

【问题描述】：

我在打开页面时滚动到元素时遇到问题。这就像滚动到锚点。我通过道具将 div id 发送到嵌套的子组件。在挂载时，我调用一个方法 scrollToSection，其中我有滚动的逻辑。

props: 
  section: String
,
mounted() 
  this.scrollToSection();
,
methods: 
  scrollToSection () 
    if (this.section != null) 
      const options = 
        force: true,
        easing: 'ease-in',
      ;
      VueScrollTo.scrollTo(`#$this.section`, 100, options);
    
  

此时子组件不会渲染 DOM 并且 document.getElementById(this.section) 返回 null。但是在父组件中，我可以访问该 div。 你知道如何解决这个问题吗？方法 nextTick 不起作用。

【参考方案1】：

有同样的问题，我需要访问嵌套组件中的图像，我必须等到图像加载到嵌套组件中，方法是添加一个 @load 事件侦听器，该事件侦听器向父组件发出加载的事件，所以我知道它已准备好并执行我的操作。

如果nextTick 不起作用，您也可以这样做，只需在子组件的挂载钩子上发出一个就绪事件，当它就绪时，执行滚动。

//Child component
mounted()
    this.$emit('ready');

_

//Parent component
...
<child-component @ready="scrollToSection()" />
...

或者替代，如果您可以访问要滚动到的 div，则可以使用纯 javascript

MyDiv.scrollIntoView( block: "start", behavior: 'smooth' );

【讨论】：

我正在寻找几个小时...尝试了很多东西，但是这个组合，哇！谢谢！