Question

我想创建一个自定义组件并像

一样使用它

<div id="app">
  <router-view />
  <my-custom-loader />
</div>

我的组件有一些我想在全球任何地方使用的方法，比如

this.$loader.show();
this.$loader.hide();

我可以创建组件，但不知道如何注入其方法/属性，以便它可以在任何地方使用。

Answer 1

组件在vuejs中创建一个封装的范围。

AFAIK你不应该这样做，因为我觉得这更像是一种完美的vuejs方法。

您可以在""组件上设置参考号。

<my-custom-loader>

由于该组件看起来像<div id="app"> <router-view /> <my-custom-loader ref="loader"/> </div>上挂载的root vue实例的子项，因此您可以使用它来访问$ refs

#app

然后，您可以在var vm = new Vue({ el: '#app' }); //my-custom-loader component's instance var loader = vm.$rers.loader;上设置此loader，这是my-custom-loader组件的实例。现在，您可以使用Vue.prototype

在任何组件中访问$loader

this.$loader

现在您可以使用

访问其方法

Vue.prototype.$loader = loader;

请记住docs

中提到的使用引用的警告

this.$loader.hide(); this.$loader.show();仅在呈现组件后填充，并且不会被激活。它仅用作直接操纵孩子的逃生舱 - 你应该避免在模板或计算属性中使用$refs。

至于我，如果您的应用非常庞大且状态管理复杂，我建议您使用custom events或注册全球event bus或使用vuex

全局访问Vuejs组件的属性/方法

1 个答案: