Vue2 子组件向父组件传参方法总结

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

前言

最近在学习 Vue，在这里总结一下父子组件通信的方式。

代码

项目介绍

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

完整代码

• App.vue

<template>
  <div id="app">
    <school :getSchoolName="getSchoolName"></school>
    <hr />
    <student @getStudentName="getStudentName"></student>
    <hr />
    <grade ref="Grade"></grade>
   
  </div>
</template>
 
<script>
import school from "./components/School.vue";
import student from "./components/Student.vue";
import grade from "./components/Grade.vue";
 
export default {
  name: "App",
  components: {
    school,
    student,
    grade,
  },
  methods: {
    //方法一：父组件给子组件一个方法，子组件接收该方法，然后再调用
    getSchoolName(name) {
      console.log("学校名称:", name);
    },
    //方法二：自定义事件，子组件使用$emit函数触发父组件绑定的事件
    getStudentName(name) {
      console.log("学生名称:", name);
    },
    //方法三：通过ref属性获取子组件实例对象，然后在
    getGrade(grade){
         console.log("数学成绩:",grade );
    }
  },
  mounted() {
      this.$refs.Grade.$on("getGrade",this.getGrade)
  },
};
</script>

• School.vue

<template>
  <div>
    学校名称{{ name }}, 学校地址{{ address }}
    <button @click="sendName">点我获取学校名称</button>
  </div>
</template>
 
<script>
export default {
  name: "School",
  props: ["getSchoolName"],
  data() {
    return {
      name: "北京大学",
      address: "北京",
    };
  },
  methods: {
    sendName() {
      this.getSchoolName(this.name);
    },
  },
};
</script>

• Student.vue

<template>
  <div>
    学生姓名{{ name }}, 学生年龄{{ age }}
    <button @click="sendStudentName">点我获取学生姓名</button>
  </div>
</template>
 
<script>
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      age: 18,
    };
  },
  methods: {
    sendStudentName() {
      this.$emit("getStudentName", this.name);
    },
  },
};
</script>

• Grade.vue

<template>
  <div>
    数学：{{ mathGrade }}
     <button @click="getGrade">点我获取数学成绩</button>
  </div>
</template>
 
<script>
export default {
  name: "Grade",
  data() {
    return {
      mathGrade: 99,
    };
  },
  methods: {
      getGrade(){
           this.$emit("getGrade",this.mathGrade)
      }
  },
};
</script>

方法总结

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

关键代码：

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

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

关键代码：

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

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

关键代码：

<---父组件--->
 <grade ref="Grade"></grade>
 
//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)
      }
  },
};

结束语

相关效果这里就不展示了。