【vue2】子组件向父组件传参方法汇总
一、前言最近在复习vue,总结一下父子组件通信的方式。希望能够一起进步。二、代码1、项目介绍有三个子组件,School.vue、Student.vue、Grade.vue。其中App.vue引用这三个组件。并在App.vue中能够接收到子组件的参数。2、完整代码如下(1)App.vue<template><div id="app"><school :getSchool
·
一、前言
最近在复习vue,总结一下父子组件通信的方式。希望能够一起进步。
二、代码
1、项目介绍
有三个子组件,School.vue、Student.vue、Grade.vue。其中App.vue引用这三个组件。并在App.vue中能够接收到子组件的参数。
2、完整代码如下
(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.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>
(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、方法总结
方法一:
总结:子组件通过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)
}
},
};
效果:
三、其他
上述即为父子组件传参的三种方法,欢迎交流讨论,QQ群:849191957
更多推荐
已为社区贡献5条内容
所有评论(0)