javascript - 在 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

假设两个实例 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'],
    // ...
}