如何从另一个改变一个Vue TypeScript组件?

时间:2018-04-14 03:27:57

标签: typescript vue.js vue-component

我试图用我以前没用过的一些技术来弄清楚,所以我正在使用Visual Studio Vue项目模板。我有LoginDialogLoginPanel个组件,我正试图让LoginPanel中的“登录”按钮在LoginDialog上设置'可见'属性的语法正确。

// Login Dialog .ts
import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component
export default class LoginDialogComponent extends Vue {
    visible: boolean = false
}

// Login Panel .ts
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { LoginDialogComponent } from '../loginDialog/logindialog'

@Component
export default class LoginPanelComponent extends Vue {
    show() {
        LoginDialogComponent.visible = true
    }
}

但是,在浏览器中,我收到关于行import { LoginDialogComponent } from '../loginDialog/logindialog'

的错误
  

TS2305:模块'“ClientApp / components / loginDialog / logindialog”'没有导出成员'LoginDialogComponent'

我注意到LoginDialogComponent类有export关键字,表示它已导出,而visible成员不允许使用export关键字。知道我在这里搞砸了吗?

修改

另外一个想法是,我可能需要在我的app.ts文件中连接这些内容,定义为:

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component({
    components: {
        MenuComponent: require('../navmenu/navmenu.vue.html'),
        LoginPanelComponent: require('../loginPanel/loginpanel.vue.html'),
        LoginDialogComponent: require('../loginDialog/logindialog.vue.html')
    }
})
export default class AppComponent extends Vue {
}

我不是100%确定它在这里做了什么 - 这些组件列表是否创建了它们引用的类的实例?如果是这种情况,我想我必须将Dialog组件传递给Panel组件,或者引用Dialog组件中的App并传递 进入Panel

2 个答案:

答案 0 :(得分:1)

从导入语句中删除花括号。当导入的类是默认的导出类时,它们会导致错误发生。

答案 1 :(得分:0)

这与TypeScript无关。它只是让您在编译时知道您导入的内容未导出。在JavaScript中也是如此。

如果您有以下

// a.js
export default expression

您可以按以下方式导入

import anyValidIdentifer from './a.js';
takesDefaultExportOfA(anyValidIdentifer);

这是

的简写
import * as anyValidIdentifer from './a.js';
takesDeafultExportOfA(anyValidIdentifer.default);

您可能会被抛弃的是导出的类被命名。这并不意味着它偶然被命名为出口。它被导出为默认值。该类的名称是该类的模块作用域本地绑定,仅在定义它的模块中引用它,而不是没有。