Vue 父组件可以通过 ref 修改子组件的值，那么我们还要不要通过 prop 去传值呢？
JaaaaackZheng · 2020-06-14 23:51:59 +08:00 · 4805 次点击这是一个创建于 1621 天前的主题，其中的信息可能已经有所发展或是发生改变。
想请教各位大佬如标题所述的问题，并且咨询一下： 1.如果更好的对前端 Vue 代码划分模块，有什么诀窍吗 2.组件间传值的较好的解决方案：父组件向子组件可通过 ref 与 prop，感觉操作 ref 比用 prop 传值更方便，有什么弊端吗。
 |
1
ochatokori 2020-06-15 07:33:00 +08:00 via Android
ref 是父组件单向修改子组件的值
用 prop 绑定变量的话任何一方修改对方都能感知 如果你只是单纯的需要父组件修改子组件响应那用 ref 没问题，不过还是建议使用 prop，因为以后看的时候看一眼 props 就能知道有什么参数可以改了 |
 |
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 。 |
 |
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 还可以做一些简单的验证 |
 |
4
tutou 2020-06-15 10:08:54 +08:00
我觉得的是解耦的表现吧！子组件只关注 prop，不关注哪里来的。如果父组件直接 ref 的话然后子组件就被耦合了，状态修改也不好追溯来源，就跟写一起没区别了。我有时也直接用 ref 因为有的 prop 父组件是接口返回的，子组件未能及时更新到最新的状态
|
 |
5
JerryCha 2020-06-15 10:26:05 +08:00
把 props 当成 properties，只用于描述子组件的特征，跨组件动态更新数据我用 vuex 。
|
 |
6
TomatoYuyuko 2020-06-15 10:45:30 +08:00
楼上说的对，重点还是解耦的问题
|
 |
7
DoodleSit 2020-06-15 13:41:45 +08:00
用过函数组件你就懂了
|
 |
8
nianyu 2020-06-15 15:01:28 +08:00
你每次 this.$refs.xxx.xxx = xxx 不嫌麻烦吗
|
 |
9
redbuck 2020-06-15 15:48:47 +08:00
命令式编程和声明式的区别
|
 |
10
SilentDepth 2020-06-15 19:51:27 +08:00
核心问题在于，通过 ref 访问的是子组件的状态，prop 传递的是父组件的状态。那么你要改的状态是谁的状态？
|
 |
11
JayLin1011 2020-06-15 20:31:59 +08:00
建议你详细把 Vue 文档好好通读一遍，一遍就好，你就能得到很多想要的答案。
1. 最致命的一点，ref 的数据是非响应式的，这决定了你的数据使用不符合预期，做不到数据驱动视图，也得不到最新数据； 2. 非受控组件的数据来源不明确，违背单向数据流的设计； 3. ref 的类型校验怎么进行，也就是说你平时使用 props 也没有验证类型，这是不好的习惯哦； 4. ref 获取元素需要考虑时机，比如只有在合适的生命周期钩子才能使用，那么 props 需不需要呢。 |
 |
12
chnwillliu 2020-07-19 20:01:29 +08:00 via Android
|
Select Language