Question

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

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

B.vue是：

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

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

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没有子父关系，因此我不能使用道具。我怎么能这样做？

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的个实例都存在于同一个根实例中，您可以将该根用作两个组件之间通信的事件中心。

第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中的prop设置为B：

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

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

2 个答案: