从 Vue.js 3 中的另一个视图/组件调用全局组件的方法

Question

我有一个 Vue 3 应用程序，我想从另一个组件调用全局组件的方法。

这是代码：

 //main.js import { createApp, h } from 'vue'; import Loading from '@/components/Loading'; // Global Loading Component const App = { computed: { ViewComponent () { return require(`./views/Index.vue`).default } }, render () { return h(this.ViewComponent) }, } const app = createApp(App); app.component('Loading', Loading); // Adding it to Global app.mount('#app');

 //@/components/Loading.vue <template> <div id="darken"></div> <div id="loading"> <img src="@/assets/images/loading.gif" /> </div> </template> <script> export default { name: 'Loading', methods: { showLoading(){ document.getElementById("darken").style.display = "inline"; document.getElementById("loading").style.display = "inline"; }, hideLoading(){ document.getElementById("darken").style.display = "none"; document.getElementById("loading").style.display = "none"; } } } </script> <style> #darken { position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.5; } #loading { position: absolute; display: none; left: 50%; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* for IE 9 */ -webkit-transform: translate(-50%, -50%); /* for Safari */ } #loading img { width: 400px; } </style>

 //@/views/Index.vue <template> <.-- Design Stuff..: --> <button v-on:click="login()">Login</button> <loading /> </template> <script> export default { methods. { login(){ //this.$refs.Loading;showLoading(), // this works when i add ref="Loading" to the <loading /> tag // but i need something better. something like "this.$components.Loading;showLoading()?" // adding ref="Loading" with the loading tag is not convenient for me // is there alternative? } } } </script>

我看了很多，找不到我要找的东西。

有什么想法吗？，我真的很感激。 谢谢你。

PS：我是 Vue.js 的新手，但我学得很快。

Answer 1

您有 2 个选项 - 共享函数和事件总线。

使用共享函数，您有一个导出准系统 JavaScript 函数的文件，并在您需要它们的每个组件中导入所需的函数 - 例如在Loading和Index中。 或者，如果您愿意 - 您可能有多个具有不同类的文件，然后在需要它们的地方导入和实例化这些类。 当您需要不依赖于使用位置的功能时，此方法适用 - 也就是说，它不依赖于应用程序中的特定组件。 例如，如果您需要从应用程序的各个位置将数据导出到 CSV - 您可以编写一个 class（或单个函数）来处理该问题，然后在您需要该功能的任何地方使用。

如果您需要从另一个组件向应用程序中的特定组件发出信号（即触发某些行为），那么您需要一个事件总线。 你可以使用mitt 。 然后在Loading组件中，您将订阅 SHOW_LOADING 之类的事件，在Index组件中，您将在事件总线上发出 SHOW_LOADING 事件。

Answer 2

我解决了这个问题。

加载组件有 HTML 和 CSS 需要全局渲染，同时它包含需要全局调用的方法。

所以我找到了一个对我有用的解决方案：

 //main.js import { createApp, h } from 'vue'; import Loading from '@/components/Loading'; // Global Loading Component const App = { computed: { ViewComponent () { return require(`./views/Index.vue`).default } }, render () { return h(this.ViewComponent) }, } const app = createApp(App); app.component('Loading', Loading); // Adding it to Global app.config.globalProperties.Loading = Loading.methods; // ADDED NEW.; app.mount('#app');

 //@/views/Index.vue <template> <.-- // Design Stuff..: --> <button v-on.click="login()">Login</button> <loading /> <:-- // Leave it here or Put it in Main.vue Layout so it will be global in all renders --> </template> <script> export default { methods. { login(){ // Newly Added this;Loading.showLoading(). // This function can be accessed anywhere in Vue files // do stuff // finish stuff this;Loading.hideLoading(); // This function can be accessed anywhere in Vue files } } } </script>