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

目录

Vue子组件向父组件传递数据的通信方式有很多，我这里列举了三种。

方法一：使用props实现

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

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

---

Vue子组件向父组件传递数据的通信方式有很多，我这里列举了三种。

方法一：使用props实现

父组件向子组件通过props传递一个函数，子组件触发事件时，调用这个函数，把自己的数据传给父组件，实质是进行了父子之间的相互通信

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

第一步：在父组件App.vue的methods中，配置一个函数getSchoolName()，形参是name，将传进去的子组件的学校名字打印在控制台上

<template>
  <div class="app">
    <h1>{
  { msg }}</h1>
    <School :getSchoolName="getSchoolName"></School>
    <Student></Student>
  </div>
</template>

<script>
// 引入组件
import School from "./components/School";
import Student from "./components/Student";
export default {
  name: "App",
  components: {
    School,
    Student,
  },
  data() {
    return {
      msg: "我是父组件App",
    };
  },
  methods: {
    getSchoolName(name){
      console.log("App收到了School的name",name)
    }
  },
};
</script>

<style >
.app {
  background-color: lightblue;
  padding: 5px;
}
</style>

代码中的核心： 

 

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

第三步：子组件中触发单击事件，在事件响应时，获取对应的name数据&#x