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处理的组件内。

Answer 2

首先，明智的最佳做法是普遍考虑现有组件之间的关系。因此，例如，如果您尝试传递的信息将用于直接同级或更进一步，您可以选择props。

如果您处理的两个组件除了当前状态外没有其他直接关系，则需要使用存储库模式或Vuex（类似于状态管理库之类的Vuex）进行推断，然后我们才能将引用传递给state或存储库模式中的属性。

FooRepository.js

export default class FooRepository {
  SomeRef
  ManyRef = []

  addRef(name) {
    this.someRef = name;
  }

  addRefs(names){
    this.ManyRef.push(names);
  }

}

以上内容可以在您的应用程序层中实例化，并使用实例属性https://vuejs.org/v2/cookbook/adding-instance-properties.html

在您的组件之间共享

取决于您的应用程序大小，可能是时候包含Vuex了，我们可以在其中将引用直接保存到我们的状态中，并以类似的方式将其用作回购模式。尽管由于它是官方支持的程序包，但其设置和使用要简单得多：

const store = new Vuex.Store({
  state: {
    ref: null
  },
  mutations: {
    saveRef (state, compRef) {
      state.ref = compRef
    }
  }
})

这是一个非常基本的商店，显示了如何将引用保存到其中，一旦我们在main中注册了商店，便可以在组件中访问该引用。可以使用this.$store.state.ref完成。这两种方法被认为是优于简单道具或诸如事件发射器之类的不具有直接关系的组件的最佳方法。

Answer 3

创建一个仅用于发出信号的新Vue实例，称为全局事件管理器。

global.event = new Vue()

当您要发出事件（如模式）时

global.event.$emit('close-modal', (optional msg))

当您要关闭模式时：

//在您的组件中

created(){
    var App = this;
    global.event.$on('close-modal', (optional msg)=>{
         this.showModal = false;
    })
}

类似地，可以打开模式。如果您使用的是vue CDN（vue的普通js文件），则在创建时使用global.event而不是window.event，而在使用时仅使用event。在浏览器中，如果使用了未声明的变量，则它引用窗口对象。

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

3 个答案: