深度理解Vue组件的子组件向父组件传递数据的通信方式，全面详细，看这一篇就够了，推荐收藏

},

};

代码中的核心：

第二步：将父组件App.vue的函数getSchoolName，通过props，传给子组件School.vue

第三步：子组件中触发单击事件，在事件响应时，获取对应的name数据，再调用父组件传过来的方法，将name数据传进去

子组件  School组件：School.vue

我是App的子组件School

学校姓名：{{name}}

学校地址：{{address}}

<button @click=“sendSchoolName”>把学校名字传给App

代码中的核心：

点击按钮，查看控制台展示的效果

方法二：使用v-on或者@，给组件Student的实例对象绑定一个自定义事件实现

案例：App是父组件，下面有一个子组件Student，实现功能如下：点击Student组件的按钮，把自己的数据：学生名称name，传给父组件App，父组件把数据在控制台打印出来

第一步：在父组件App.vue中，给子组件Student的实例对象绑定一个自定义事件

{{ msg }}

核心代码，下图的1中的v-on可以简写为@，即v-on:demo与@demo等价

第二步：在子组件Student.vue中，绑定单击响应函数，触发Student组件实例对象身上的demo事件

我是App的子组件Student

学生姓名：{{name}}

学生年龄：{{age}}

<button @click=“sendStudentName”>点我将学生姓名传给App

核心代码

点击按钮，查看控制台展示的效果：

上述两种方法的区别：

相同点：二者都在父组件中配置了回调函数，供子组件使用

不同点：

方法一，使用props，父组件将回调函数传给子组件，子组件接收该函数，然后亲自调用该函数

方法二，使用$emit，子组件触发事件的响应函数，执行该回调函数，子组件不需要接收该函数，也不用亲自调用

方法三：使用ref,给组件Student的实例对象绑定一个自定义事件实现

还是针对子组件Student.vue和父组件App.vue，进行演示，不需要修改子组件Student.vue。

只需要修改父组件App.vue，通过 ref 属性 为子组件Student.vue赋予一个 ID 引用，通过this.$refs.student，就可以拿到子组件的实例对象

{{ msg }}