從掛載函數內部調用Vue方法

Question

在我的 Vue 掛載代碼中，我通過 this.test() 調用函數測試。 這按預期工作正常。

但是，當我從新的 ResizeObserver 函數調用 this.test() 時，出現錯誤

this.test 不是函數

我知道這是因為this現在指向 resizeObserver。 我不明白的是我應該在那里使用什么。 刪除 this 也會出錯。

我有以下Vue代碼

  mounted: function() {
    this.test();

    new ResizeObserver(function() {
        this.test();
      }).observe(this.g("tC"));
  },
  methods: {
    test: function() {}
    ....
}

Answer 1

您應該將“this”綁定到傳遞給 ResizeObserver 的函數

  mounted: function() {
    this.test();
    new ResizeObserver(function() {
        this.test();
      }.bind(this)).observe(this.g("tC"));
  },

或者使用箭頭函數（如果您的環境支持 ES6），因為箭頭函數使用外部作用域的“this”值：

  mounted: function() {
    this.test();
    new ResizeObserver(() => {
        this.test();
      }).observe(this.g("tC"));
  },

Answer 2

它像這樣對我有用

  mounted: function() {
    $vm = this;

    new ResizeObserver(function() {
        $vm.test();
      }).observe(this.g("tC"));
  },
  methods: {
    test: function() {}
    ....
}

Answer 3

使用箭頭函數綁定作用域

 new ResizeObserver(()=> { //--> Arrow Function
        this.test();
      }).observe(this.g("tC"));