Question

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

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

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

Answer 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钩中删除。

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

1 个答案: