Vue.js访问父组件

时间:2016-10-13 13:06:24

标签: javascript vue.js

我有一个拥有这种方法的子组件:

getSubscriptions () {
    MessageService.subscriptions()
            this.$parent.loading = true;
            .then((data) => {
                if (data.data.subscriptions == null) {
                    this.noSubscriptions = true;
                } else {
                    this.subscriptions = data.data.subscriptions;
                }

                this.$parent.loading = false;
            }).bind(this);
}

所以我想在我的父组件中显示一个加载圈我像这样访问它:

this.$parent.loading

(我的父组件有一个名为loading的数据属性)

但是当我尝试使用gulp编译时,我收到了:

[14:52:56] Starting 'browserify'...
  46 |                             }
  47 | 
> 48 | t                           this.$parent.loading = false;
     |                             ^
  49 |                         }).bind(this);
  50 |             },
  51 | 
{ SyntaxError: unknown: Unexpected token (48:28)
  46 |                             }
  47 | 
> 48 | t                           this.$parent.loading = false;
     |                             ^
  49 |                         }).bind(this);
  50 |             },

这里可能有什么问题?

(我使用Vue.js 1.0

1 个答案:

答案 0 :(得分:7)

您正在承诺设置中添加新语句。您需要重新排列代码:

this.$parent.loading = true;
MessageService.subscriptions()
        .then((data) => {

但是,我不会像这样直接访问父母。它在父级和子级之间创建紧密耦合 - 只有父级公开loading标志时,此组件才会起作用。

相反,请查看custom events