vue實(shí)現(xiàn)動(dòng)態(tài)tab組件思路？

描述：移動(dòng)web使用vue實(shí)現(xiàn)左右兩列布局，左側(cè)為各種信息表格名稱(chēng)組成的列表，右側(cè)內(nèi)容為點(diǎn)擊左側(cè)菜單后動(dòng)態(tài)加載的內(nèi)容。右側(cè)內(nèi)容主要為各種表單，并且有默認(rèn)值（用戶可以修改并提交）。

實(shí)現(xiàn)方式：
思路1.左側(cè)列表與右側(cè)內(nèi)容為不同的組件，比如left.vue right.vue兩個(gè)單文件組成。
思路2.左側(cè)列表與右側(cè)內(nèi)容為同一個(gè)組件內(nèi)部。內(nèi)容的切換由動(dòng)態(tài)組件切換達(dá)成。

哪一種實(shí)現(xiàn)方式好一點(diǎn)呢？個(gè)人認(rèn)為第二種好一點(diǎn)，整體性更強(qiáng)！

新增：兄弟組件間傳值，也就是根據(jù)左側(cè)菜單點(diǎn)擊的不同條目，去更新右側(cè)組件的不同表單，在項(xiàng)目不大的情況用事件總線的方式是不是好于vuex？

回答

編輯回答

薄荷糖

我會(huì)寫(xiě)在一個(gè)組件中，左側(cè)是一個(gè) tab，右邊是動(dòng)態(tài)組件，

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

簡(jiǎn)單幫你擼了一下，差不多就是這樣。

2018年8月17日 02:36

編輯回答

好難瘦

我做的話，還是要根據(jù)右側(cè)的內(nèi)容是否是統(tǒng)一的，比如像外賣(mài)，不同的類(lèi)別，右邊不同的商品，那么肯定是同一個(gè)組件去做。
再比如你這種情況，右側(cè)主要是不同的表單，如果表單的內(nèi)容不同，甚至更多?？隙▋A向不同的組件，甚至可以采用不同的路由，二級(jí)路由的方式去做

2018年1月25日 03:46

編輯回答