javascript - 在 Vue 组件之外更改变量值的最佳方法

Question

我正在寻找在组件外部更改 Vue 变量值的最佳方法。我正在使用 Vue webpack以及。

我已经使用 vue webpack 创建了一个项目。 在其默认的 App.vue 文件中，我有一个变量。例如，我们以 showModal 为例，它的默认值为 false。 然后我将它构建在一个 javascript 文件中。

<button>Register</button> {{-- event button --}}
<div id="guest"></div> {{-- Here I'm rendering my template --}}

<script src="{{ asset('js/vue-js/guest.js') }}"></script> {{-- builded Javascript file --}}

问题是我想将我的 showModal 变量更改为 true，但事件按钮不在我的组件模板上。

实现此目标的最佳方法是什么？

Answer 1

如果你想在 vue 之外访问一个 vue 组件，你可以将它注册到 window 对象，然后从任何地方访问它。

window.myVueComponent = new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

现在您可以从任何地方访问它

window.myVueComponent.myValue = 123

但这种“风格”之所以被称为全局命名空间污染，是有原因的。 ;)

我认为最好扩展您的 vue 应用程序，以便按钮也在 vue 处理的组件中。