vue组件当中data函数里面的数据怎么调用？

Question

在vue组件化开发当中，我有一个组件没有在其他地方引用，只是通过vue-router的<router-view>路由出口渲染到页面，可以渲染成功，但是data里面的数据在methods里面不能调用，是没有创建实例吗？大概就是想写一个方法，以下是代码：

export default {
    data () {
        return {
            on_off:false
        }
    },
    methods:{
        isOnOff:()=>{
            this.on_off = !this.on_off;
        }
    }
}

点击后提示'on_off' of undefined

直接写成 on_off = true; 也报错提示 on_off is not defined
还有就是export导出之后，一定要在其他地方import才可以吗？

Answer 1

应该是箭头函数的问题，箭头函数会导致作用域穿透，所以在箭头函数里的this并非指代当前的Vue实例，建议使用ES5语法isOnOff: function() {}或者ES6语法isOnOff() {}代替。

Answer 2

应该是箭头函数的问题。你可以将this打出来看一下。
相关的可以去查一下箭头函数的this，然后我记得官方文档里也有说明。

Answer 3

methods:{
isOnOff(){
        this.on_off = !this.on_off;
    }
}

这样写就好了

Answer 4

https://cn.vuejs.org/v2/api/#...
不应该使用箭头函数来定义 method 函数 。
箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例。
用官方示例写methods就好了。