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

我有两个组件：组件

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

没有子-父关系，因此，我不能使用道具。我该怎么做？

< p>我会考虑用简单的方法来解决你的问题。

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

并将存储分配给组件

A

和

B

：

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

export default {
    name: 'B',
    props: ['AVar'],
    // ...
}

以一个实际的例子

假设

A

和

B

的两个实例都位于同一根实例中，您可以使用该根作为两个组件之间通信的事件中心

步骤1 |在需要时调用

handleAVarChange

的根模板：

const rootTemplate = `

步骤2 |实现

rootTemplate

的Vue根脚本：

const root = new Vue({
    template: rootTemplate,
    data() {
        return { AVar: null };
    },
    methods: {

        handleAVarChange(value) {
            this.AVar = value;
        }
    }
});

• 模板

  ：既包括

  A

  又包括

  B

• data

  返回属性为

  AVar

  的对象，我们将使用该属性将源变量存储在

  A

  上

• 方法.handleAVarChange

  作为

  根.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

：

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

export default {
    name: 'B',
    props: ['AVar'],
    // ...
}

---

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