学习使用Vue过程中涉及到组件间通信方式的区别,做一个学习记录总结
父子组件通信
父 > 子 : 通过 Prop 向子组件传递数据
使用 v-bind 来动态传递父元素的 props给子元素子 > 父 : 通过事件向父级组件发送消息
我们可以调用内建的$emit
方法并传入事件的名字,来向父级组件触发一个事件,然后使用v-on
在组件上监听这个事件,就像监听一个原生 DOM 事件一样
祖孙组件通信
祖孙组件之间其实不存在直接通信传递方法,我们可以选择使用二次传递父子通信方式来达成目的
同级组件通信
同级组件不能直接传值,需要一个中间桥梁,可以先将数据传递给公共的父组件,然后父组件再将数据传递给需要的子组件。