Vue2组件传参大总结

组件通信的场景:

1. 父子组件通信
2. 隔代组件通信
3. 兄弟组件通信
4. 跨路由组件通信

一.props/emit传参

这是最基础的组件通信方式,父组件通过props可以向子组件进行通信,子组件通过emit向父组件通信

这里面又分为两种情况:

1. 父组件传递参数给子组件,子组件接受后要去修改父组件传递过来的参数数据

   那就需要父组件中 使用.sync,子组件使用 $emit('update:变量名','修改后的数据')

2. 就是单纯的父组件给子组件传递参数,和子组件单纯的给父组件传递参数

父组件中：

子组件中：

总结:

最常见的父子组件通信方式,props支持参数验证,emit只会触发父组件的监听事件,不适合多层次组件参数传递,需要逐层传递参数

二.$parent/$children 传参

通过 $patent / $children 可以拿到父子组件的实例 ，从而调用实例里的数据方法，实现父子组件通信