[vue2] Summary of methods for passing parameters from child components to parent components

I. Introduction

Recently, I am reviewing vue and summarizing the way parent-child components communicate. Hope to make progress together.

Two, the code

1. Project introduction

There are three subcomponents, School.vue, Student.vue, Grade.vue. Where App.vue refers to these three components. And in App.vue, the parameters of the subcomponent can be received.

2. The complete code is as follows

(1) 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>

（2）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>

（3）Student.view

<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>

(4) 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>

3. Method summary

method one:

Summary: The child component receives the method of the parent component through the props attribute, and then calls the method of the parent component and passes parameters in the child component.

key code:

<---父组件--->
 <school :getSchoolName="getSchoolName"></school>

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

Effect:

 Method Two:

Summary: Bind to the subcomponent instance object through a custom event, and then use the $emit method in the subcomponent to trigger the custom event and pass parameters, and the parent component calls the callback function to complete the value

key code:

<---父组件--->
<student @getStudentName="getStudentName"></student>

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

Effect:

  Method three:

Summary: Through the ref attribute, the parent component gets the child component instance object, and then triggers the method

key code:

<---父组件--->
 <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)
      }
  },
};

Effect:

 3. Others

The above are the three methods of passing parameters between parent and child components, welcome to exchange and discuss, QQ group: 849191957