vue实现动态tab组件思路？

Question

描述：移动web使用vue实现左右两列布局，左侧为各种信息表格名称组成的列表，右侧内容为点击左侧菜单后动态加载的内容。右侧内容主要为各种表单，并且有默认值（用户可以修改并提交）。

实现方式：
思路1.左侧列表与右侧内容为不同的组件，比如left.vue right.vue两个单文件组成。
思路2.左侧列表与右侧内容为同一个组件内部。内容的切换由动态组件切换达成。

哪一种实现方式好一点呢？个人认为第二种好一点，整体性更强！

新增：兄弟组件间传值，也就是根据左侧菜单点击的不同条目，去更新右侧组件的不同表单，在项目不大的情况用事件总线的方式是不是好于vuex？

Answer 1

我比较赞同第一个吧。第二个虽然你觉得整体性强，但是如果都柔到一个组件里面，代码会非常杂乱，非常多，非常不利于以后维护和修改。

---

是的，在你涉及到的组件和数据不是特别多的时候，用事件通知确实比vuex要方便一点。

Answer 2

我会写在一个组件中，左侧是一个 tab，右边是动态组件，

<template>
    <div class="tabs">
        <tab-item
            v-for="tab in tabs"
            @click.native="onTabClick(tab)">
    </div>
    <components :is="currentTab.component">
</template>

<script>
export default {
    data() {
        return {
            tabs: [
                {
                    name: 'a',
                    component: 'cpA'
                }            
            ],
            currentTab: {
                name: 'a',
                component: 'cpA'
            }
        }
    },
    methods: {
        onTabClick(tab) {
            this.currentTab = tab
        }
    }
}
</script>

简单帮你撸了一下，差不多就是这样。

Answer 3

我做的话，还是要根据右侧的内容是否是统一的，比如像外卖，不同的类别，右边不同的商品，那么肯定是同一个组件去做。
再比如你这种情况，右侧主要是不同的表单，如果表单的内容不同，甚至更多。肯定倾向不同的组件，甚至可以采用不同的路由，二级路由的方式去做