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

mikechen
  • 595
<template>
  <div>
    {{this}}
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>

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

回复
阅读 499
2 个回答

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

直接使用 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

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

宣传栏