Question

我需要全局变量来解决错误。但是我不想为每个组件设置输入变量。没有输入变量，如何查看ABC组件中的$ errors？

(without <abc :errors="$errors"></abc>)

index.js：

Vue.prototype.$errors = {};

new Vue({
    el: '#app',
    render: h => h(App),
}

App.vue：

...
name: 'App',
components: {
ABC
}
...
methods:{
getContent() {
this.$errors = ...from axis...
}

ABC组件：

<template>
<div>{{ error }}</div>
</template>
...
watch: {
???
}

Answer 1

如private void textBox1_TextChanged(object sender, EventArgs e) { BindingSource bs = new BindingSource(); bs.DataSource = dgv1.DataSource; bs.Filter = "[ColumnName1] like '%" + textBox1.Text + "%' " + "OR [ColumnName2] like '%" + textBox1.Text + "%'" + "OR [ColumnName3] like '%" + textBox1.Text + "%'" + "OR [ColumnName4] like '%" + textBox1.Text + "%'"; dgv1.DataSource = bs; }所说：您可以像下面的答案那样使用Vuex并访问Vue之外的值：https://stackoverflow.com/a/47575742/10219239
这是Estradiaz答案的补充：您可以通过Skirtles访问此类变量。您可以直接设置它们，也可以使用Vue.set来实现。

我的代码（与Vue.prototype.variable基本相同）： main.js

Skirtles

Home.vue：

const mobile = Vue.observable({ mobile: {} });
Object.defineProperty(Vue.prototype, '$mobile', {
  get() { return mobile.mobile; },
  set(value) { mobile.mobile = value; }
});

function widthChanged() {
  if (window.innerWidth <= 768) {
    if (!Vue.prototype.$mobile) Vue.set(Vue.prototype, '$mobile', true);
  } else if (Vue.prototype.$mobile) Vue.set(Vue.prototype, '$mobile', false);
}

window.addEventListener("resize", widthChanged);

widthChanged();

Answer 2

这是一个如何完成的示例：

const errors = Vue.observable({ errors: {} })

Object.defineProperty(Vue.prototype, '$errors', {
  get () {
    return errors.errors
  },
  
  set (value) {
    errors.errors = value
  }
})

new Vue({
  el: '#app',
  
  methods: {
    newErrors () {
      // Generate some random errors
      const errors = {}
      
      for (const property of ['name', 'type', 'id']) {
        if (Math.random() < 0.5) {
          errors[property] = 'Invalid value'
        }
      }
      
      this.$errors = errors
    }
  }
})

new Vue({
  el: '#app2',
  
  watch: {
    $errors () {
      console.log('$errors has changed')
    }
  }
});

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <pre>{{ $errors }}</pre>
  <button @click="newErrors">New errors</button>
</div>

<div id="app2">
  <pre>{{ $errors }}</pre>
</div>

我创建了两个Vue实例来说明该值确实是共享的。在第一个实例中单击按钮将更新$errors的值，在第二个实例中触发watch。

这里有一些技巧。

首先，反应性只能跟踪可观察对象属性的读取和写入。因此，我们要做的第一件事是创建一个合适的对象：

const errors = Vue.observable({ errors: {} })

然后我们需要将其连接到Vue.prototype.$errors。通过为该属性定义get和set，我们可以代理到可观察对象中的基础属性。

所有这些都非常接近data属性在幕后的工作方式。对于data属性，可观察对象称为$data。然后，Vue将defineProperty与get和set一起使用，从Vue实例代理到$data对象，就像在我的示例中一样。

如何在组件vuejs中监视全局变量？

2 个答案: