什么是组件通信呢?
组件通信就是指 组件与组件 之间的 数据传递
因为组件的数据是独立的,无法直接访问其他组件的数据,所以想用其他组件的数据,你就得用到组件通信
如图中,组件A是组件B和组件C是父子关系,组件B和组件C是非父子关系
下面我先来说说它们的几种用法,随后我们再去使用它们
这是父子之间的两种用法,使用props和$emint来进行父子之间的传递数据
父向子传值
先看看父向子传值的流程图
再来看看下面的案例
这样父向子传值你就完成啦!
子向父传值
子向父传值的方法是 $emit ,但是父组件传过来的值子组件不能直接修改,不过也有办法,让我们往后看
1.先在子组件中使用 $emit传递数据 2.在父组件中使用自定义事件接收 它的方法就是
this.$emit('自定义事件名', '数据1','数据2', '数据3'......)
我们现在想修改上图父组件传过来的title,如下图所示
那我们来总结一下父子通信的流程
父传子 props
- 父中给子添加属性值
- 子 props 接收
- 子使用
子传父 $emit
- 子 $emit 发送消息
- 父中给子添加消息监听
- 父中实现处理函数
