覆盖全局变量的值

Question

我刚刚在我的main.js 中创建了两个变量$isCompany 和$isLoggedIn。

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";

Vue.config.productionTip = false;
Vue.prototype.$isCompany = true;
Vue.prototype.$isLoggedIn = true;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

我的问题： 如何在Navigation.vue 的<Button> 组件中访问这些变量？ v-ifs 正在工作，但我无法切换变量的值，所以我认为覆盖该值存在问题。

<div v-if="this.$isLoggedIn" class="header-left">
  <User v-if="this.$isCompany" name="Company" img="..."></User>
  <User v-if="!this.$isCompany" name="Not Company" img="..."></User>
  <Button @onclick="this.$isCompany = !this.$isCompany" :color="'grey'" :isIconOnly="true"><b-icon icon="arrow-down-up"></b-icon></Button>
</div>

如果您需要，这里是我将@onclick 绑定到我的<Button> 组件的方式：

<button @click="$emit('onclick')" :class="['button', 'size-'+size, 'color-'+color, isRounded ? 'type-rounded' : '', isIconOnly ? 'type-icon-only' : '']">

编辑： 如果我单击按钮，就会在我的控制台中注意到这个错误：

Answer 1

v-ifs 正在工作

你确定吗？我希望v-if="this.$isLoggedIn" 不起作用，因为这里不应该使用this（这是多余的；那里已经有一个隐含的this.，所以你基本上是在做this.this.$isLoggedIn）。

但我无法切换变量的值

这可能是因为您没有以“反应式”的方式定义变量。

Vue.prototype.$isCompany = true;
Vue.prototype.$isLoggedIn = true;

在Vue原型对象上定义这样的变量感觉有点别扭。

您可以通过将全局变量定义为根 Vue 实例的数据属性来以反应方式定义它们：

new Vue({
  router,
  render: h => h(App),

  data: {
    isCompany: false,
    isLoggedIn: false,
  }
}).$mount("#app");

您可以通过this.$root.isCompany 从任何后代组件访问它们。所以，在你的模板中，你会这样做：

<User v-if="$root.isCompany" name="Company" img="..."></User>

如果你真的想避免在模板中做$root.，那么你可以在Vue原型对象上定义代理属性（除了上面的）：

Object.defineProperties(Vue.prototype, {
  $isCompany: {
    get() { return this.$root.isCompany },
    set(x) { this.$root.isCompany = x }
  },
  $isLoggedIn: {
    get() { return this.$root.isLoggedIn },
    set(x) { this.$root.isLoggedIn = x }
  },
})

现在您可以在模板中执行此操作：

<User v-if="$isCompany" name="Company" img="..."></User>

这是一个小演示：

Object.defineProperties(Vue.prototype, {
  $isCompany: {
    get() { return this.$root.isCompany },
    set(x) { this.$root.isCompany = x }
  }
})

Vue.component('child', {
  template: '<div><input type="checkbox" v-model="$isCompany"> {{ $isCompany }}</div>'
})

new Vue({
  el: '#app',
  data: {
    isCompany: false,
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <child></child>
</div>