在 Vue JS 的不同组件中为数据变量设置观察者

Question

我有两个组件：组件 A 和组件 B。 A.vue 就像：

export default {
    name: 'A',
    data () {
        var: true
    }
}

B.vue 是：

import A from './A'
export default {
    name: 'B',
    components: {
        A
    }
}

我想在组件B中使用组件A的变量var的动态值。因此我设置了一个观察者：

import A from './A'
export default {
    name: 'B',
    watch: {
        A.data().var: func () {
            console.log('Value of var changed in A.')
        }
    }
    components: {
        A
    }
}

但是，这种方法行不通。组件 A 和 B 没有父子关系，因此我不能使用 props。我该怎么做？

Answer 1

我会考虑使用简单的 state management (Vue docs) 来解决您的问题。

var store = {
  debug: false,
  state: {
      myVar: false
  },
  setMyVarAction (value) {
    this.state.myVar = value
  }
}

并将商店分配给您的组件 A 和 B:

data () {
  return  {
    sharedStore: store.state
  }
}

jsfriddle 有一个工作示例。

Answer 2

假设 A 和 B 的 实例都存在于同一个根实例中，您可以使用该根作为通信的事件中心在 2 个组件之间。

第一步|需要时调用handleAVarChange的根模板：

const rootTemplate = `

<div class="root"> <A @var-change="handleAVarChange"></A> <B v-bind:AVar="AVar"></B> </div>

`;

步骤2 |实现rootTemplate:
的Vue根脚本
const root = new Vue({ template: rootTemplate, data() { return { AVar: null }; }, methods: { handleAVarChange(value) { this.AVar = value; } } });

template：同时包含A和B
的模板
data returns 具有属性 AVar 的对象，我们将使用它来存储源变量A.

methods.handleAVarChange 可用作 root.template.
中的事件处理程序

步骤 3 | $emit 一个名为 'var-change' 的事件，新值来自 A:

export default { name: 'A', data () { return { Var: true, } }, methods: { onSomeEvent(varValue) { this.$emit('var-change', varValue); // or maybe... this.$emit('var-change', this.Var); }, }, }

步骤 4 | 确保 AVar 在 B:
中设置为 prop
export default { name: 'B', props: ['AVar'], // ... }

在 Vue JS 的不同组件中为数据变量设置观察者

Setting a watcher for a data variable in different component in Vue JS

javascript

watch

vue.js