如何使用Typescript Vue组件对外公开数据？

Question

在将typescript与单文件组件一起使用时，我很难从Vue应用程序外部调整数据。

我有一个声明了新Vue的Main.ts，但是将其分配给一个变量并不能给我该变量可用。所以var x=new Vue（）{...}在Main.ts不工作

我尝试在我的中公开变量。vuefile，我知道我可以用app选择元素__vue_但它没有在中声明的变量。vue文件，仅当我在main中初始化变量时。ts文件，我看到了它们，但组件模板无法呈现它们。

主要的ts:

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

应用程序。vue脚本：

export default class App extends Vue {
  search: string = "";
}

当我看到JavaScript实现时，我可以从控制台通过调用绑定到Vue应用程序的th变量来调整属性，比如var x=new Vue（）{…} 但我似乎无法在打字脚本中实现这一点




Answer 1

这是我想出的最终解决方案：

let instance = new Vue({
  render: (h) => h(App)
}).$mount('#app');

(<any>window).vueInstance = instance.$children[0];

现在我可以使用vue实例访问我的组件。

Answer 2

Typescript是JavaScript的超集。这意味着它只会增加，而不会从中移除。在JavaScript中可以执行的任何操作都可以在Typescript中执行。

也就是说，如果希望以全局方式访问Vue实例，只需将其分配给窗口：

(window as Window).Vue = new Vue({ 
  render: (h) => h(App),
}).$mount('#app');

^您可能必须根据您的设置在TypeScript不爆炸中垫片。

此外，在执行文件的范围之外，用var声明的变量本身并不可用。这样做是为了不污染全球环境。如果您确实需要访问它，还可以从文件中导出它并将其导入其他地方。