vue 如何在模板中获取 this 实例?

Question

<template>
  <div>
    {{this}}
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>

编译报错,请问如何在模板中获取 this 呢~

Answer 1

尤老师千辛万苦把this给我们proxy到render中，为啥又想把实例直接套娃在render中？

Answer 2

直接使用 this 不太可能，只能用 computed 属性转一下（Vue2）

<template>
  <div>{{me}} </div>
</template>

export default {
    computed: {
        me() { return this; }
    }
}

然而很不幸，这样会出错。因为 me 是一个对象，Vue 框架会去找它的 toJSON() 来转换成文本进行渲染，然而 this 上没有 .toJOSN()。可以在 methods 中去定义一个

export default {
    // ....
    methods: {
        toJSON() { return "hello world"; }
    } 
}

然后你可以看到 {{me}} 的位置渲染成了 hello world

—— 然而，这样做有什么意义呢？不如直接用规范的数据、计算属性或者方法

Answer 3

在template中增加这样的代码，self就可以获取到this了{{ void (self = this) }}