如何从另一个更改一个 Vue TypeScript 组件？答案

【问题标题】：How to alter one Vue TypeScript Component from another?如何从另一个更改一个 Vue TypeScript 组件？
【发布时间】：2018-09-24 10:32:27
【问题描述】：

我正在尝试使用一些我以前没有使用过的技术，所以我正在使用 Visual Studio Vue 项目模板。我有LoginDialog 和LoginPanel 组件，我正在尝试让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 成员不允许导出关键字。知道我在这里搞砸了什么吗？

编辑

我的另一个想法是我可能需要在我的 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 组件，或者在App 组件中引用Dialog，然后传递那个进入Panel？

【问题讨论】：

不要在import { LoginDialogComponent } 中使用大括号，使用import LoginDialogComponent 代替默认导出的模块
啊，可能就是这样！它消除了编译错误，但是当我尝试LoginDialogComponent.visible = true 时，然后Property 'visible' does not exist on type 'typeof LoginDialogComponent。有没有办法访问导入的实例？

标签： typescript vue.js vue-component

【解决方案1】：

这实际上与 TypeScript 无关。它只是让您在编译时知道您正在导入的内容不会被导出。在 JavaScript 中也是如此。

当你有以下情况时

// a.js
export default expression

可以通过以下方式导入

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

这是一个简写

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

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

【讨论】：

我不认为错误消息的内容不清楚；我不知道如何解决。 export default LoginDialogComponent 不起作用。在您的回答中，有什么东西可以代替“表达式”和“任何有效标识符”在我的特定情况下有效吗？

【解决方案2】：

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

【讨论】：