VueJS - 如何在脚本标签中获取单个文件组件的实例

Posted 2023-02-23

【中文标题】VueJS - 如何在脚本标签中获取单个文件组件的实例

【英文标题】：VueJS - How to get a single file component's instance in the script tag

【发布时间】：2019-03-18 08:30:45

【问题描述】：

我有一个文件组件dashboard.vue。在它的脚本标签中，我有以下代码。

<script>
    export default 
        data: function()
            return 
                scrolled: false,
            
        ,
    ;
    $window.on(
        scroll: function()
            this.scrolled = true;
        ,
    );
</script>

如何在$window.on事件监听器中访问组件的vue实例来更新数据？我知道为什么this 在当前设置中不起作用，只需要知道什么会起作用。干杯。

【问题讨论】：

在您的默认导出对象中，添加一个created 方法并将代码放在那里（您将可以访问this）参见。 Vue lifecycle hooks

【参考方案1】：

您可以将您的事件侦听器移动到 created 或 mounted 钩子内 ..

  <script>
    export default 
      data: function () 
        return 
          scrolled: false,
        
      ,
      created() 
        const self = this
        $(window).on(
          scroll: function () 
            self.scrolled = true
          
        )
      ,
      beforeDestroy() 
        $(window).off("scroll")
      
    
  </script>

不要忘记在 beforeDestroy 钩子中删除它。

【讨论】：

干杯。只是想知道您是否可以给我一个示例，说明何时忘记删除 beforeDestroy 挂钩中的侦听器会导致问题。

@Mav 根据经验，每当您将外部库与 Vue 一起使用时，您都应该考虑手动清理。这主要是因为它might lead to memory leaks。在您的情况下，它可能会引入错误，因为您的事件侦听器的回调正在引用组件的实例，如果侦听器在组件被销毁后处于活动状态，则会导致问题。