vue.js - 从类方法访问 Vue 变量的正确方法

Question

这是我的代码:

<div id='R'> {{ y.vmx() }} </div>

<script>
    class Test {
      vmx() {
        return vm.x
      }
    }

    var vm = new Vue({
      el: '#R',
      data: {
        x: 11,
        y: new Test()
      }
    })
</script>

弹出这个错误: TypeError: Cannot read property 'x' of undefined at Test.vmx ((index):18)
如何在类方法中访问 Vue 变量？ (Vue v2.6.11)

Answer 1

在这种情况下，模板被加载 之前 vm已分配，所以 vm是 undefined在 Test类(class)。理想情况下，在您的代码设计中应避免这种循环依赖，但有几种解决方法。
选项 1:推迟对 vm 的任何引用内Test直到加载初始模板之后。
例如，设置一个 ready标志在 next tick 后 该组件有 mounted ，然后使用标志到 conditionally render需要访问 vm 的模板部分:

class Test {
  vmx() {
    return vm.x
  }
}

var vm = new Vue({
  el: '#app',
  data: () => ({
    x: 2,
    y: new Test(),
    ready: false,
  }),
  async mounted() {
    await this.$nextTick()
    this.ready = true
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>

<div id="app">
  <p v-if="ready">{{ y.vmx() }}</p>
</div>

选项 2:传递对 vm 的引用实例化时 Test

class Test {
  constructor(vm) {
    this.vm = vm
  }
  
  vmx() {
    return this.vm.x
  }
}

const vm = new Vue({
  el: '#app',
  data() {
    return {
      x: 2,
      y: new Test(this),
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>

<div id="app">
  <p>{{ y.vmx() }}</p>
</div>