在vue中如何实现父子组件间的通讯

父组件向子组件传值可以有两种方式props或者是通过this.$attrs来接收。但是需要注意的是,如果使用了props,那么在使用this.$attrs去获取,是获取不到的。接下来以具体事例,进行展示:

1. 父向子传值

Vue 之 组件间的通讯概述

Props接收父组件传送的数据,有两种方式如下:

Vue 之 组件间的通讯概述

或者

Vue 之 组件间的通讯概述

接下来展示,通过this.$attrs或者父组件传来的数据,如下:

Vue 之 组件间的通讯概述

2. 子向父传值

Vue 之 组件间的通讯概述

Vue 之 组件间的通讯概述

3.  关于子传父的另一种实现方式

Vue 之 组件间的通讯概述

Vue 之 组件间的通讯概述

相关文章: