V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
guorui112
V2EX  ›  JavaScript

关于 vue 分割 template 的问题

  •  
  •   guorui112 · 2019-08-22 18:02:38 +08:00 · 3814 次点击
    这是一个创建于 1911 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    13 条回复    2019-09-05 18:23:43 +08:00
    chenlaocong
        1
    chenlaocong  
       2019-08-22 18:31:48 +08:00
    我也有这种疑惑。不过我一般没有复用的话就直接在子组件调用接口了
    molvqingtai
        2
    molvqingtai  
       2019-08-22 18:47:29 +08:00 via Android
    我也很纠结这个问题,我更倾向于从父级传下来,这样父组件里面统一处理逻辑,子组件负责渲染,但是有时候明明在子组件处理更简洁,非得到父组件绕一圈
    mamahaha
        3
    mamahaha  
       2019-08-22 19:00:07 +08:00
    有好办法的,可惜好办法太值钱,大神们都不说
    royzxq
        4
    royzxq  
       2019-08-22 19:10:31 +08:00   ❤️ 1
    vuex
    q8164305
        5
    q8164305  
       2019-08-22 19:14:19 +08:00 via Android
    等一位大神,我有时候也很纠结
    luob
        6
    luob  
       2019-08-22 19:38:49 +08:00   ❤️ 2
    善用插槽功能, 划分组件的时候,把需要通信的核心小组件留下,而把无关的布局、样式独立到组件
    像这样

    ``` jsx
    <Page>
    <Layout>
    <InputWrapper>
    <input type="text" value={} onChange={}></input>
    </InputWrapper>
    <ButtonWrapper>
    <button onClick={() => { }}>Reset</button>
    </ButtonWrapper>
    </Layout>
    </Page>
    ```
    ookkxw
        7
    ookkxw  
       2019-08-22 19:39:32 +08:00   ❤️ 1
    如果懂 react 的话可以参考 react context 传递方式,在方法内创建 component,这样数据可以在内存固化并且隔离,剩下的事情就简单了,做个监听器,数据改变通知
    ChefIsAwesome
        8
    ChefIsAwesome  
       2019-08-22 20:05:07 +08:00
    有共享需求,就得加中间人,把数据往上一级存。搞到最后就是全局状态了,那个时候代码写起来肯定是罗里吧嗦的。建议还是真的有这种需求的时候再往上存。平时就是小组件里头写,把请求+数据处理的那部分分离出来,这样即使后面要重构成数据往上存的情况,也非常容易。
    SilentDepth
        9
    SilentDepth  
       2019-08-22 21:18:44 +08:00   ❤️ 1
    能用 slot 就用 slot,基本不用担心状态传递的问题了。但只适合一层嵌套的情况,嵌套层数多了就麻烦了。

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

    想解决得更彻底一点,还可以用 Vue.observable( ),把共享状态分离出来,需者自取,皆大欢喜。如果敢于激进,使用 vue-function-api 可以获得更完善的工具包,运气好的话还可以在后面无缝过渡到 Vue 3。
    shpasspass
        10
    shpasspass  
       2019-08-22 21:59:44 +08:00
    那还是用 vuex 吧,相比 redux,vuex 已经很简单了。
    zjsxwc
        11
    zjsxwc  
       2019-08-23 08:01:33 +08:00 via Android
    依赖倒置,依赖抽象呗

    vue 组件通过 props 时各个组件之间相互持有,(包括父子组件,也包括你说的要通信的小组件之间),和面向对象的构造函数没有本质区别
    deathscythe
        12
    deathscythe  
       2019-08-23 09:23:39 +08:00 via iPhone
    #9 楼说得没错,最近项目都改成 vue-function-api
    zhuweiyou
        13
    zhuweiyou  
       2019-09-05 18:23:43 +08:00
    我一般是 页面级别请求。
    除非是特殊的组件(比如省市区组件,在内部拉数据)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3427 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:55 · PVG 12:55 · LAX 20:55 · JFK 23:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.