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

问题描述

问 题

在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才可以吗？

解决方案

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

这篇关于vue.js - vue组件当中data函数里面的数据怎么调用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！