首页 文章

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

提问于
浏览 次
2

我正在寻找在组件之外更改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 ，但事件按钮不在我的组件模板上 .

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

javascript vue.js vuejs2

3 回答

  • 2

    首先，最好的方法是考虑现有组件与关系之间的关系 . 因此，例如，如果您尝试传递的信息将用于直接兄弟或更远的链中，您可以选择 props .

    如果您处理的两个组件除了当前状态之外没有任何直接关系，您将需要使用存储库模式或Vuex（类似于状态管理库的流量）进行推断，然后我们可以将引用传递给state或者传递给属性 . 存储库模式 .

    FooRepository.js

export default class FooRepository {
  SomeRef
  ManyRef = []

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

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

}

    以上内容可以在您的App Layer中实例化，并使用实例属性https://vuejs.org/v2/cookbook/adding-instance-properties.html在您的组件之间共享

    根据您的应用程序大小，可能需要包含Vuex，我们可以将引用直接保存到我们的状态，并以类似的方式将其用作repo模式 . 虽然它是官方支持的软件包，但设置和使用更简单：

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

    这是一个非常基本的商店，展示了我们如何将引用保存到它中，一旦我们在main中注册了商店，我们就可以在我们的组件中访问这个引用 . 这可以使用 this.$store.state.ref 完成 . 这两种方法被认为是简单简单道具的最佳方法，或类似于没有直接关系的组件的事件 Launcher .

    回复于
  • 2

    如果要访问vue之外的vue组件，可以将其注册到window对象，然后从任何地方访问它 .

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

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

    window.myVueComponent.myValue = 123

    但这种“风格”被称为全球命名空间污染的原因 . ;）

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

    回复于
  • 1

    创建一个新的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 . 在浏览器中，如果使用未声明的变量，则它引用窗口对象 .

    回复于

相关问题