Vue 堆栈组件

Question

我正在构建服务器 UI，但我正在努力解决组件问题。也许有人知道如何堆叠所有组件并使用功能控制所有 UI？ 例子

• App.vue
  • 聊天.vue
  • hud.vue
  • player.vue

我需要在app.vue中显示所有.vue

App.vue

从 './components/chat.vue' 导入聊天 导出默认{ 名称：'应用程序'， 成分： { 聊天 } }

chat.vue

导出默认 { 方法： { 测试：函数（）{ console.log("测试"); } } }

当我运行 webiste 时，如何在 DevTools 控制台中调用函数 test？

Answer 1

你知道Vue Dev Tools browser extension吗？这将让您检查页面上的所有组件并调整它们的数据/道具。

我认为它不会让您调用他们的方法，但如果您需要在控制台中调用其中一种方法，您可以尝试（暂时，出于测试目的）在 @ 内的窗口上提供组件实例987654322@生命周期函数。

编辑：顺便说一句，这是你的整个 App.vue 吗？我在想也许我误解了你的问题，你认为......

  components: {
    chat
  }

...表示它应该在页面上呈现组件。它仅使其可供父组件使用。您必须将它放在 <template> 中才能实际渲染它。