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() {}代替。

回答:

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

回答:

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

这样写就好了

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注