V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
JaaaaackZheng
V2EX  ›  Vue.js

Vue 父组件可以通过 ref 修改子组件的值,那么我们还要不要通过 prop 去传值呢?

  •  
  •   JaaaaackZheng · 2020-06-14 23:51:59 +08:00 · 4564 次点击
    这是一个创建于 1382 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想请教各位大佬如标题所述的问题,并且咨询一下: 1.如果更好的对前端 Vue 代码划分模块,有什么诀窍吗 2.组件间传值的较好的解决方案:父组件向子组件可通过 ref 与 prop,感觉操作 ref 比用 prop 传值更方便,有什么弊端吗。

    12 条回复    2020-07-19 20:01:29 +08:00
    ochatokori
        1
    ochatokori  
       2020-06-15 07:33:00 +08:00 via Android
    ref 是父组件单向修改子组件的值
    用 prop 绑定变量的话任何一方修改对方都能感知

    如果你只是单纯的需要父组件修改子组件响应那用 ref 没问题,不过还是建议使用 prop,因为以后看的时候看一眼 props 就能知道有什么参数可以改了
    crclz
        2
    crclz  
       2020-06-15 07:43:19 +08:00   ❤️ 1
    诀窍:将 Angular 的风格运用于 Vue 。

    Angular 压根不允许持有子组件的引用(在 Vue 中对应 vm,var vm=new Vue(...)),更别提调用子组件的方法( Vue 中应该是 methods )和修改子组件的成员值(在 Vue 中应该是 data )。

    Angular 通过 props 和 Service 传值,那么在 Vue 里面应当也使用 props 和状态管理( vuex )传值。

    然后,传递变化、多值需要用到一个简单优雅的类——Observable ( rxjs ),也可以将这个单独引入 vue 。
    hitaoguo
        3
    hitaoguo  
       2020-06-15 09:19:30 +08:00
    通过 ref 去改组件的值感觉就是强行修改了。

    组件一般都会提供一些参数,拿 element-ui 举例,button 组件有 type,size 参数,通过 prop 去传很方便也很直观,而且是写在模板里就可以,后面如果动态修改的话,父组件里 this.btn_type 也比 this.$refs.btn.type 要方便些吧。

    我个人用到 ref 的时候,基本都是调用子组件的方法。

    对了,props 还可以做一些简单的验证
    tutou
        4
    tutou  
       2020-06-15 10:08:54 +08:00
    我觉得的是解耦的表现吧!子组件只关注 prop,不关注哪里来的。如果父组件直接 ref 的话然后子组件就被耦合了,状态修改也不好追溯来源,就跟写一起没区别了。我有时也直接用 ref 因为有的 prop 父组件是接口返回的,子组件未能及时更新到最新的状态
    JerryCha
        5
    JerryCha  
       2020-06-15 10:26:05 +08:00
    把 props 当成 properties,只用于描述子组件的特征,跨组件动态更新数据我用 vuex 。
    TomatoYuyuko
        6
    TomatoYuyuko  
       2020-06-15 10:45:30 +08:00
    楼上说的对,重点还是解耦的问题
    DoodleSit
        7
    DoodleSit  
       2020-06-15 13:41:45 +08:00
    用过函数组件你就懂了
    nianyu
        8
    nianyu  
       2020-06-15 15:01:28 +08:00
    你每次 this.$refs.xxx.xxx = xxx 不嫌麻烦吗
    redbuck
        9
    redbuck  
       2020-06-15 15:48:47 +08:00
    命令式编程和声明式的区别
    SilentDepth
        10
    SilentDepth  
       2020-06-15 19:51:27 +08:00
    核心问题在于,通过 ref 访问的是子组件的状态,prop 传递的是父组件的状态。那么你要改的状态是谁的状态?
    JayLin1011
        11
    JayLin1011  
       2020-06-15 20:31:59 +08:00
    建议你详细把 Vue 文档好好通读一遍,一遍就好,你就能得到很多想要的答案。
    1. 最致命的一点,ref 的数据是非响应式的,这决定了你的数据使用不符合预期,做不到数据驱动视图,也得不到最新数据;
    2. 非受控组件的数据来源不明确,违背单向数据流的设计;
    3. ref 的类型校验怎么进行,也就是说你平时使用 props 也没有验证类型,这是不好的习惯哦;
    4. ref 获取元素需要考虑时机,比如只有在合适的生命周期钩子才能使用,那么 props 需不需要呢。
    chnwillliu
        12
    chnwillliu  
       2020-07-19 20:01:29 +08:00 via Android
    @crclz Angular 中的 @ViewChild 表示被自己被忽略了,怎么不能拿子组件实例了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3336 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 13:22 · PVG 21:22 · LAX 06:22 · JFK 09:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.