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

如何从一个Vue TypeScript组件更改另一个?,typescript,vue.js,vue-component,Typescript,Vue.js,Vue Component,我正在尝试使用一些以前从未使用过的技术,因此我正在使用Visual Studio Vue项目模板。我有LoginDialog和LoginPanel组件,我正在尝试正确的语法,以便在LoginPanel中设置“Login”按钮,在LoginDialog上设置“visible”属性 // Login Dialog .ts import Vue from 'vue'; import { Component } from 'vue-property-decorator'; @Component exp

我正在尝试使用一些以前从未使用过的技术,因此我正在使用Visual Studio Vue项目模板。我有
LoginDialog
LoginPanel
组件,我正在尝试正确的语法,以便在
LoginPanel
中设置“Login”按钮,在
LoginDialog
上设置“visible”属性

// 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
    }
}
但是,在浏览器中,我从“../loginDialog/loginDialog”中得到一个关于行
import{LoginDialogComponent}的错误,该行表示

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%确定它在这里做什么-这些组件列表是否创建了它们引用的类的实例?如果是这种情况,我想我必须将
对话框
组件传递到
面板
组件,或者在
应用程序
组件中引用
对话框
,并将其传递到
面板

这实际上与TypeScript无关。它只是让您在编译时知道您要导入的内容没有导出。同样的道理在JavaScript中也是如此

当你有以下

// a.js
export default expression
您可以通过以下方式导入它

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

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

您可能会被导出的类命名为。这并不意味着它被顺带命名为export。它将作为默认值导出。该类的名称是该类的模块范围的本地绑定,仅在定义它的模块内引用它,而不是不引用它

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

我不认为错误消息的含义不清楚;但我不知道如何解决<代码>导出默认LoginDialogComponent
不起作用。在你的回答中,有什么东西可以代替“expression”和“anyValidIdentifier”在我的特定情况下工作吗?不要在
import{LoginDialogComponent}
中使用大括号,使用
import LoginDialogComponent
代替默认导出的模块,那可能就是它了!它删除了编译错误,但是当我尝试
LoginDialogComponent.visible=true
时,LoginDialogComponent的类型“typeof”上不存在
属性“visible”。是否有方法访问导入的实例?