问题一：
携程的一个旅游行程设计页面如上图
设计的行程大概是这样的：
-第一天
--交通
---租车
--景点
---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[第几个]，
传的参数比较多，是否有合理点的方法？？？
你邀请错人了，因为我写代码有过度封装的习惯，连 86400000 都要写成常量的那种。
首先，从"机票"到"活动"每种行程各封装成一个行程组件；
然后，封装一个这些组件的代理组件，代理接收一个 type 参数指定行程的模式，其他参数则直接透传给行程组件；
再后，封装一个日期组件，负责展示一天的行程总计；
最后，数据用 Vuex 或者 Redux 管理，将各个日期的拼接并展示。
代理组件可以不要，其存在是为了让引用行程组件的代码看起来整齐一点，但是代码的可读性会降低。
如果配置 JSX 和 TS 的话就更加明晰了。
问题一：组件结构可以这样划分：
--父组件
--第N天
--机票
--景点（还可以细分，每个景点选项）
--餐饮
--...问题二：
组件结构划分得够细后，对应的子组件只接收相关的数据，数据处理起来也不会出现tour[第几天].children[第几个] .children[第几个]这种情况了。
从你的数据结构里就可以划分组件啦
[
{}
{}
{}
]每一个数组以及子数组下面的元素都是一种格式，那你就可以按照数组/子数组来不断划分组件了阿。
至于ui组件，那就比较随意了，用的多的都可以封装，或者代码量大的，也可也提取出来。
从情景来看，代码重用度还是很高的，时间线有现成的，不考虑
可以把"天封装成拥有一组行为的组件"
把每一种行为封装成一个组件
--交通
--景点
--餐饮
--酒店。。。。
以这写大的行程点拆分就行了 每天都是重复的
另外数据结构尽可能扁平 比如你上面的景点 完全可以不用数组 type标记一下就可以了