vue 组件封装的疑问

Question

第一种方式:

父组件给子组件传值 但是传递过来的数据在子组件内不能操作
只能通过this.$emit() 来通知父组件.....

第二种方式:

使用this.$refs.xxx.方法();

这种利用父组件调用子组件的方法
这种在子组件内可以操作数据

但是第二种方式网上说有问题!

请问一下大家 那种方式更好点?

Answer 1

第一种方式相对比较好，第二种方法是直接 操作dom来实现的，会影响性能，其实看你的意思是想双向绑定，可以在组件 加上.sync ,子组件里面通过 $emit('update:具体的变量')， 就可以做到双向的效果！

Answer 2

传过来的数据可以在子组件操作，在子组件的data接收，然后操作data就可以了。

Answer 3

这是父子组件通信的两种方式，不存在那种更好，要看使用场景，

• 第一种父子间prop，emit通信是vue封装好的推荐使用的方式
• 第二种是属于父直接通过ref调用，实际上讲通过ref能操作子组件的一切，这种操作明显是有一些危险性的，所以使用时最好在子组件预留出父组件调用的接口，比如父组件要调用子组件一个data数据，子组件写一个函数返回这个data，父组件直接调用这个函数即可，所以记住任何时候不要在父组件对子组件有任何操作，如果需要把操作行为写在子组件中，父组件只是去调用
• 当然了ref这种调用也有很大的场景，用久了就慢慢能摸索出规律了，建议阅读这篇文章https://segmentfault.com/a/11...