vue父子组件通信
vue父子组件通信的几种情况:
1、父组件传递自己的data值给子组件;
2、父组件调用子组件的事件;
3、子组件调用父组件的事件;
一:父组件传递自己的data值给子组件
父组件可以使用 props 把data数据传给子组件。
实现方式:使用 vue 的 props
// 关于 props 的官方介绍
// 子组件A.vue配置如下:
// 如下为父组件App.vue配置如下:
这样,就完成了父组件向子组件的数据传递。
二:父组件调用子组件的事件
主要通过 ref 和 $refs 来实现,先来看官方介绍:
下面为示例:
1.子组件配置如下:
2.父组件配置如下:
三:子组件调用父组件的事件
子组件可以使用 $emit 调用父组件的自定义事件。
// 关于 $emit 的官方介绍
// 子组件配置:
注意:$emit也可以带参数,参数可以是单个值也可以是一个数组,参数可以传递给父组件(实现把子组件里的变量或字符串传给父组件),this.$emit('sureFu', '这里写要传递的参数')。如下:
this.$emit('sureFu', aaa )
或
this.$emit('sureFu', [this.name, this.age, ...] )
// 父组件配置:
完成。