Javascript Vue组件数据函数-为空

我有一个Vue.js组件，定义如下：

module.exports = Vue.component('folder-preview', {
    props: ['name', 'path', 'children', 'open'],
    template: `...
    `,
    methods: mapActions([
    ]),
    computed: mapState([
    ]),
    data: ()=> {
        console.log(this);
        return {
            collapsed: (this.open !== 'true')
        }
    }
});

基本上，我试图将

折叠

作为组件的本地数据，但将在prop中传递的值作为初始值。然而，这看起来像是

这个。open

总是未定义的。事实上，console.logging

这个

打印一个空对象，我似乎不明白为什么

---

我有什么地方出错吗？

代码中的问题很微妙：您将数据声明为箭头函数

如中所述，箭头函数从定义上下文获取

this

，而常规函数从调用上下文获取

this

。将

data

设置为箭头函数意味着它无法正确接收组件范围

如果声明为常规函数，而该函数没有作用域

this

关闭，则该组件工作正常

Vue.component（'sample'{
道具：[“打开”]，
模板：“{collapsed}}”，
数据（）{
返回{
折叠：this.open！==“true”
}
}
})
新Vue({
el:“#应用程序”
})

如果打印此

会发生什么情况。在
创建的
中打开
（添加属性
创建的
，
数据和
计算的
，以及
数据
，
创建的
获取函数）？为什么不能将“打开中的道具”用作折叠并在“父级”中设置值element@kevguy在创建的
中，此
也是empty@usrNotFound设置折叠的是组件本身。父母不应该关心/不需要意识到这一点。它是组件的内部可能的副本