vue-子组件向父组件传参方法汇总

一、前言

最近在复习vue，总结一下父子组件通信的方式。希望能够一起进步。

二、代码 1、项目介绍

有三个子组件，School.vue、Student.vue、Grade.vue。其中App.vue引用这三个组件。并在App.vue中能够接收到子组件的参数。

2、完整代码如下

（1）App.vue

（2）School.vue

（3）Student.vue

（4）Grade.vue

3、方法总结 方法一：

总结：子组件通过props属性接收父组件的方法，然后在子组件中调用父组件的方法以及传递参数。

关键代码：

<---父组件--->
 

<---子组件--->
export default {
  name: "School",
  props: ["getSchoolName"],
  data() {
    return {
      name: "北京大学",
      address: "北京",
    };
  },
  methods: {
    //子组件的一个点击事件
    sendName() {
       //由于接收到方法参数，所以可以直接调用
      this.getSchoolName(this.name);
    },
  },
};

效果：

 方法二：

总结：通过自定义事件，绑定到子组件实例对象上，然后在子组件中使用$emit方法触发自定义事件以及传参，父组件调用回调函数完成取值

关键代码：

<---父组件--->


<---子组件--->
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      age: 18,
    };
  },
  methods: {
    //子组件的一个点击事件
    sendStudentName() {
    //通过$emit触发自定义事件（@后面的为触发的自定义事件）
      this.$emit("getStudentName", this.name);
    },
  },
};

效果：

  方法三：

总结：通过ref属性，父组件获取到子组件实例对象，然后触发方法

关键代码：

<---父组件--->
 

//script中使用挂载函数：
  mounted() {
    //this.$refs.Grade表示获取到grade这个实例
    //$on()表示当……时候，第一个参数表示当调用getGrade函数的时候，第二个参数表示父组件中的回调函数
      this.$refs.Grade.$on("getGrade",this.getGrade)
  },

  methods:{
    //父组件的回调函数
    getGrade(grade){
         console.log("数学成绩:",grade );
    }
}

<---子组件--->
export default {
  name: "Grade",
  data() {
    return {
      mathGrade: 99,
    };
  },
  methods: {
      getGrade(){
        //使用方法和方法二中的类似
           this.$emit("getGrade",this.mathGrade)
      }
  },
};

效果：

 三、其他

上述即为父子组件传参的三种方法，欢迎交流讨论，QQ群：849191957