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

【问题标题】：Setting a watcher for a data variable in different component in Vue JS在Vue JS中为不同组件中的数据变量设置观察者
【发布时间】：2018-06-16 13:36:27
【问题描述】：

我有两个组件：组件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 没有父子关系，因此我不能使用道具。我该怎么做？

【问题讨论】：

标签： javascript vue.js watch

【解决方案1】：

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

第 1 步 | 需要时调用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 返回一个具有属性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'],
    // ...
}

【讨论】：

谢谢，我在发布这个问题后完全采用了这种方法。

【解决方案2】：

我会考虑使用简单的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 有一个工作示例。

【讨论】：