1

我正在遵循这个SO 答案以实现兄弟姐妹数据共享（通信）。

这是我的 ComponentA.vue：

<template>
    <input id="ca" type="text" v-model="localvarA" placeholder="localvarA">
    <label>{{localvarA}}</label>
    <div>
        thisdiv
        {{sharedvar}}
    </div>
</template>


<script>
    import remoteservice from '../services/applications'
    export default {
        data: function () {
            return {
                localvarA: 'localvalA',
                sharedvar: remoteservice.sharedvar
            }
        }
    }
</script>

组件B.vue：

<template>
    <input type="text" v-model="localvarB" placeholder="localvarB">
    <label>{{localvarB}}</label>
    <div>
        thisdiv2
        <input type="text" v-model="sharedvar" placeholder="sharedvar">
    </div>

</template>


<script>
    import remoteservice from '../services/applications'
    export default {
        data: function () {
            return {
                localvarB: 'localvalB',
                sharedvar: remoteservice.sharedvar
            }
        }
    }
</script>

这是我的 App.vue：

<template>
    <component-a></component-a>
    <component-b></component-b>
</template>


<script>
    import ComponentA from './ComponentA.vue';
    import ComponentB from './ComponentB.vue';
    export default {
        components: {ComponentA,ComponentB},
        data: function () {
            return {
            }
        }
    }
</script>

这是我的 application/index.js （共享模块）：

export default {
    sharedvar: 'sharedval'
};

在上面，共享变量 sharedvar 在 ComponentB 中更新时不会更新它在 ComponentA 中的 div 中的值。

我已经尽力在 vue-loader 中复制那个 SO 答案中的jsfiddle，但不确定为什么这不起作用。如果有人需要尝试一下，这里是 github repo：https ://github.com/rahulserver/vueshared-vue-loader

那么我在哪里做错了，我该如何让它发挥作用呢？

4

1 回答 1

1

您正在声明data正在使用 中的值初始化的项目remoteservice.sharedvar。因为sharedvar是一个简单的值而不是一个对象，所以它们只是一个值的单独副本。

在小提琴示例中，hub.state是一个对象。如果将它分配给一个变量，然后引用该变量的某个成员，则您引用的是hub.state. 在它们的每个组件中，它们都执行以下操作：

hubState: hub.state

然后使用

<input v-model="hubState.message">

为了平行，你应该做

sharedvar: remoteservice

然后使用

 <input type="text" v-model="sharedvar.sharedvar" placeholder="sharedvar.sharedvar">

（或将名称更改为更明智）。诀窍是你必须使用一个对象。

于 2017-04-19T14:53:39.150 回答