架构Vue应用程序

Question

该应用程序具有各种结构的工具（页面）。例如，酒店搜索工具（在列表的左窗格中，在右地图上）或报告工具（在全幅页面上），

我发现了一个有趣的组件，用于处理github上的面板。然后他开始做这样的事情：

//MyPanes.vue
<splitpanes class="default-theme" horizontal>
        <span>
            <div class="left-panel"><slot name="left"></slot></div> 
        </span>
        <span splitpanes-min="20" splitpanes-max="50" :splitpanes-default="horizontal_splitter[1]">
            <div class="right-panel"><slot name="right"></slot></div>
        </span>
</splitpanes>

//HotelTool.vue      
<MyPanes>
      <template slot="left">
        <v-btn @click.native="add">Add counter</v-btn>
      </template>
      <template slot="right">
        <div>{{ counter }}</div>
        <v-map />
      </template>
</MyPanes>

..
data: {
   counter: 0
},
methods: {
   add() { this.counter++; }
}
.. 

计数器用于测试。但这行不通。可能是因为该插槽的内容不了解父级的数据。

因此出现了问题。如何实现这种行为？需要放弃老虎机吗？

当然，您可以通过事件总线或存储来实现，但是我有很多工具，用这种方式传输数据不是很方便。我想在一个文件中创建该乐器，在其中为左右两部分编写逻辑，以便他们彼此了解。所有工具也是如此。

您能分享您的想法吗？如何在单亲环境中更改插槽之间的数据？还有其他解决方案吗？

Example tool Example tool 在左侧和右侧可能会有不同的组件。

完整代码：

<template>
    <MyPanes>
        <template v-slot:left>
            <h1>Мониторинг</h1>
            <v-btn @click.native="add">{{ counter }}</v-btn>
        </template>
        <template v-slot:right>
            {{counter}}
        </template>
    </MyPanes>
</template>

<script>
    export default {
        data() {
            return {
                counter: 0,
            }
        },
        methods: {
            add: function () {
                this.counter++;
            }
        }
    }
</script>

Answer 1

场景解决方案

这里数据范围应该没有问题，因为对数据的引用全部在“ HotelTool”实例内完成。

别忘了'data'是一个在Vue中返回对象的函数：

data() {
   return {
       counter: 0
   }
},
methods: {
   add() { this.counter++; }
}

还可以通过将 .native 替换为 .passive ，将您的@click事件更新为被动触发：

<v-btn @click.passive="add">Add counter</v-btn>

Splitpanes反应性

Splitpanes文档声称默认情况下在their website上禁用或阻止反应。您可以添加监视插槽元素以恢复反应性。

<splitpanes watch-slots class="default-theme" horizontal>
....

---

一般回答：在Vue实例之间传递数据

作为将来读者提出相同问题的更一般的答案，可以通过以下方式在Vue中的实例之间共享数据：

传递到道具并随事件一起发出（推荐）： VueJS.org Props，并且， VueJS.org Custom Events

全局数据“存储”： Vuex Guide

我建议您习惯第一种选择，因为这在Vue文档中是推荐的，并且适合大多数情况。 Vuex方法开始对大型应用程序有用。

提示：Vue的控制台错误非常有用，并且通常是查找涉及范围的错误的第一位。他们还提供了Chrome扩展程序，可帮助您实时了解应用程序状态。