Question

我有一个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')
        }
    }
});

基本上，我试图将collapsed作为组件的本地数据，但将prop中传递的值作为初始值。但是，似乎this.open始终未定义。事实上，console.logging this打印出一个空对象，我似乎无法理解为什么。

我出错了吗？

Answer 1

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

如this question所述，箭头函数从定义的上下文中获取this，而常规函数从调用上下文中获取this。使data成为箭头函数意味着它将无法正确接收组件范围。

当声明为不关闭this范围的常规函数时，该组件正常工作。

Vue.component('sample', {
  props: ['open'],
  template: '<div>{{collapsed}}</div>',
  data() {
    return {
      collapsed: this.open !== 'true'
    }
  }
})

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <sample open="true"></sample>
</div>

Vue组件数据功能 - 为空

1 个答案: