关于 vue 分割 template 的问题

[guorui112]

写 vue 的时候，会遇到一个页面 template 中标签过多的问题，我一般都会分割成一个个小模块，但是有的时候，会纠结模块的数据，是由父级通过 props 传递下来，还是在小模块中直接调用接口请求，这些小模块在某些情况下，需要和另一个小模块通信，数据传递的时候很是麻烦，有没有什么规范类的东西，可以让我了解一下在哪里拿数据比较好，感谢各位大佬

[chenlaocong]

我也有这种疑惑。不过我一般没有复用的话就直接在子组件调用接口了

[molvqingtai]

我也很纠结这个问题，我更倾向于从父级传下来，这样父组件里面统一处理逻辑，子组件负责渲染，但是有时候明明在子组件处理更简洁，非得到父组件绕一圈

[mamahaha]

有好办法的，可惜好办法太值钱，大神们都不说

[royzxq]

vuex

[q8164305]

等一位大神，我有时候也很纠结

[luob]

善用插槽功能, 划分组件的时候，把需要通信的核心小组件留下，而把无关的布局、样式独立到组件
像这样

``` jsx
<Page>
<Layout>
<InputWrapper>
<input type="text" value={} onChange={}></input>
</InputWrapper>
<ButtonWrapper>
<button onClick={() => { }}>Reset</button>
</ButtonWrapper>
</Layout>
</Page>
```

[ookkxw]

如果懂 react 的话可以参考 react context 传递方式，在方法内创建 component，这样数据可以在内存固化并且隔离，剩下的事情就简单了，做个监听器，数据改变通知

[ChefIsAwesome]

有共享需求，就得加中间人，把数据往上一级存。搞到最后就是全局状态了，那个时候代码写起来肯定是罗里吧嗦的。建议还是真的有这种需求的时候再往上存。平时就是小组件里头写，把请求+数据处理的那部分分离出来，这样即使后面要重构成数据往上存的情况，也非常容易。

[SilentDepth]

能用 slot 就用 slot，基本不用担心状态传递的问题了。但只适合一层嵌套的情况，嵌套层数多了就麻烦了。

用 provide/inject 可以应对嵌套层数较多的情况，或者更高级一点的用事件传播，两头约定好口径就可以为所欲为了。project/inject 可以保留可响应性，事件传播不能，这个谈不上优劣，看取舍。

想解决得更彻底一点，还可以用 Vue.observable( )，把共享状态分离出来，需者自取，皆大欢喜。如果敢于激进，使用 vue-function-api 可以获得更完善的工具包，运气好的话还可以在后面无缝过渡到 Vue 3。

[shpasspass]

那还是用 vuex 吧，相比 redux,vuex 已经很简单了。

[zjsxwc]

依赖倒置，依赖抽象呗

vue 组件通过 props 时各个组件之间相互持有，（包括父子组件，也包括你说的要通信的小组件之间），和面向对象的构造函数没有本质区别

[deathscythe]

#9 楼说得没错，最近项目都改成 vue-function-api

[zhuweiyou]

我一般是 页面级别请求。
除非是特殊的组件（比如省市区组件，在内部拉数据）