【求助】携程的这个页面在VUE下该怎么设计比较好？单页面下能否组件化

Question

问题一：

携程的一个旅游行程设计页面如上图

设计的行程大概是这样的：
-第一天
--交通
---租车
--景点
---XX景点
---XX景点
--餐饮
---XX中饭
--景点
---XX景点
---XX景点
--酒店
---A酒店 或者 B酒店
-第二天
--交通
---租车
--景点
---XX景点
---XX景点
--餐饮
---XX中饭
--景点
---XX景点
---XX景点
--酒店
---A酒店 或者 B酒店

vue下大概是这样来设计的

tour:[{
    title:'',                                        //行程的名字
    date:'',                                        //行程的出发时间
    children:[{                                        //项目
        type:1,                                        //项目的类型
        title:'景点',                                //项目的名字
        children:[{                                    //景点
            id:1,                                    //景点id
            title:'XX景点',                            //景点名字
            image:'http://www.xxx.com/xxx.jpg'，    //景点图片
        },children:[{                                    //景点
            id:2,                                    //景点id
            title:'XX景点',                            //景点名字
            image:'http://www.xxx.com/xxx.jpg'，    //景点图片
        }]
    },{
    ..................
    }]
},{
..................
}]

按照上面的tour结构，再加template、style、script就很臃肿了
目前vue-cli下制作的话单页面代码都堆在一起
不知如何能够合理的组件化，简化这个页面代码？？？

---

问题二：

如图
目前比如已经把“选择图片”做成了组件，点击后，dialog弹出组件
因为要传输景点的ID给子组件，然后返回图片的URL给父组件，并赋值给相应的景点
所有要props，tour结构的每个节点信息，如tour[第几天].children[第几个] .children[第几个]，
传的参数比较多，是否有合理点的方法？？？

Answer 1

问题一：组件结构可以这样划分：
--父组件

--第N天
    --机票
    --景点（还可以细分，每个景点选项）
    --餐饮
    --...

问题二：
组件结构划分得够细后，对应的子组件只接收相关的数据，数据处理起来也不会出现tour[第几天].children[第几个] .children[第几个]这种情况了。

Answer 2

你邀请错人了，因为我写代码有过度封装的习惯，连 86400000 都要写成常量的那种。

首先，从“机票”到“活动”每种行程各封装成一个行程组件；
然后，封装一个这些组件的代理组件，代理接收一个 type 参数指定行程的模式，其他参数则直接透传给行程组件；
再后，封装一个日期组件，负责展示一天的行程总计；
最后，数据用 Vuex 或者 Redux 管理，将各个日期的拼接并展示。

代理组件可以不要，其存在是为了让引用行程组件的代码看起来整齐一点，但是代码的可读性会降低。
如果配置 JSX 和 TS 的话就更加明晰了。

Answer 3

--交通
--景点
--餐饮
--酒店。。。。
以这写大的行程点拆分就行了 每天都是重复的

另外数据结构尽可能扁平 比如你上面的景点 完全可以不用数组 type标记一下就可以了

Answer 4

从你的数据结构里就可以划分组件啦

[
{}
{}
{}
]

每一个数组以及子数组下面的元素都是一种格式，那你就可以按照数组/子数组来不断划分组件了阿。

至于ui组件，那就比较随意了，用的多的都可以封装，或者代码量大的，也可也提取出来。

Answer 5

从情景来看，代码重用度还是很高的，时间线有现成的，不考虑
可以把“天封装成拥有一组行为的组件”
把每一种行为封装成一个组件