我现在正在学习VueJS和Laravel . 我已经可以在Laravel中制作一些逻辑，将一个数组从laravel控制器传递到刀片模板，然后从那里传递给VueJS组件 .

现在我遇到了一个问题，我无法找到（最佳实践）解决方案 .

我的视图有一个带有2个标签的标签元素 . 每个选项卡都有自己的Vue组件，因此逻辑可以完成 . 问题是需要在两个组件中操纵某些变量 . 这个想法是，如果在 component 1 中操作 var A ，则数据也会在 component 2 中更新 .

我发现一个很好的方法是使用Base和Extended组件 . 所以我做了一个 basecomponent 和2个扩展的组件 . 我'am able to use the data from the base component in my extended components but is looks like the extended components make/use a kind of copy of the vars from the base component. If i manipulate the vars in one of the extended componentes, the vars of the extended component are manipulated, the vars in the base component aren' t .

也许有人可以帮助我如何以两种方式绑定这些数据，而不是使用“副本” .

我的 BaseComponent 看起来像这样：

<script>
    export default {
        data(){
            return{

            }
        },
        props: ['data'],
    }
</script>

我的 ExtendedComponent 看起来像这样：

<script>
    import BaseComponent from './BaseComponent.vue';
    export default {
        extends: BaseComponent,
    } 
 </script>

我只是通过 this.data.x 在我的 ExtendedComponent 中使用var数据

我希望我能很好地解释我的问题，因为我还不熟悉VueJS . 如果需要更多信息，请告诉我缺少的信息 .

vue.js vuejs2