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

[JaaaaackZheng]

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

[ochatokori]

ref 是父组件单向修改子组件的值
用 prop 绑定变量的话任何一方修改对方都能感知

如果你只是单纯的需要父组件修改子组件响应那用 ref 没问题，不过还是建议使用 prop，因为以后看的时候看一眼 props 就能知道有什么参数可以改了

[crclz]

诀窍：将 Angular 的风格运用于 Vue 。

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

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

然后，传递变化、多值需要用到一个简单优雅的类——Observable （ rxjs ），也可以将这个单独引入 vue 。

[hitaoguo]

通过 ref 去改组件的值感觉就是强行修改了。

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

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

对了，props 还可以做一些简单的验证

[tutou]

我觉得的是解耦的表现吧！子组件只关注 prop，不关注哪里来的。如果父组件直接 ref 的话然后子组件就被耦合了，状态修改也不好追溯来源，就跟写一起没区别了。我有时也直接用 ref 因为有的 prop 父组件是接口返回的，子组件未能及时更新到最新的状态

[JerryCha]

把 props 当成 properties，只用于描述子组件的特征，跨组件动态更新数据我用 vuex 。

[TomatoYuyuko]

楼上说的对，重点还是解耦的问题

[DoodleSit]

用过函数组件你就懂了

[nianyu]

你每次 this.$refs.xxx.xxx = xxx 不嫌麻烦吗

[redbuck]

命令式编程和声明式的区别

[SilentDepth]

核心问题在于，通过 ref 访问的是子组件的状态，prop 传递的是父组件的状态。那么你要改的状态是谁的状态？

[JayLin1011]

建议你详细把 Vue 文档好好通读一遍，一遍就好，你就能得到很多想要的答案。
1. 最致命的一点，ref 的数据是非响应式的，这决定了你的数据使用不符合预期，做不到数据驱动视图，也得不到最新数据；
2. 非受控组件的数据来源不明确，违背单向数据流的设计；
3. ref 的类型校验怎么进行，也就是说你平时使用 props 也没有验证类型，这是不好的习惯哦；
4. ref 获取元素需要考虑时机，比如只有在合适的生命周期钩子才能使用，那么 props 需不需要呢。

[chnwillliu]

@crclz Angular 中的 @ViewChild 表示被自己被忽略了，怎么不能拿子组件实例了