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

Posted 2023-02-23

【中文标题】如何使用 Typescript Vue 组件向外部公开数据？

【英文标题】：How to expose data to the outside, with a Typescript Vue component?

【发布时间】：2019-11-29 19:15:07

【问题描述】：

在使用带有单文件组件的打字稿时，我无法从 Vue 应用程序外部调整数据。

我有一个Main.ts，其中声明了一个新的 Vue，但是将它分配给一个变量并没有给我那个可用的变量。所以 Main.ts 中的 var x = new Vue()... 不起作用

我尝试在我的 .vue 文件中公开变量， 我知道我可以使用app.__vue__ 选择元素，但它没有在.vue 文件中声明的变量，只有当我在main.ts 文件中初始化变量时，我才能看到它们，但不会被组件模板。

Main.ts：

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

Vue.config.productionTip = false;

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

App.vue 脚本：

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

当我看到 javascript 实现时，我可以从控制台通过调用绑定到 Vue 应用程序的变量来调整属性，例如 var x = new Vue() ...,，但我似乎无法让它在 TypeScript 中工作

【参考方案1】：

Typescript 是 JavaScript 的超集。这意味着它只会增加它，它不会从中删除。任何你可以在 JavaScript 中做的事情，你也可以在 Typescript 中做。

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

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

^ 您可能需要根据您的设置填充它，以便 Typescript 不会爆炸。

此外，用var 声明的变量在执行文件的范围之外并不固有地可用。这是故意这样做的，以免造成全球污染。如果您确实需要访问它，您也可以将其从文件中导出并导入到其他地方。

【讨论】：

感谢您的快速回答，绑定有效，但尚未使来自渲染的单文件组件的数据可访问。在示例中是搜索字段。

啊，我在$children 下找到了！感谢您为我指明正确的方向！

【参考方案2】：

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

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

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

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