vue实现父子组件的互相传值及调用方法

1.父级组件调用子组件及传值

(1)命名
组件命名使用驼峰命名法，如addStudent
引用时，用短横线连接，如:

<add-student></add-student>

2、引用
将组件页面import进入当前页面，并在componens里注册组件

import addStudent from "./components/addStudent";
export default {
components: {
addStudent
},
}

3、传值
父组件通过横线连接的方法，将当前页面的值传给子组件
子组件通过驼峰命名法，获取值

//父组件
<add-student
:student-id="studentId"
></add-student>
data(){
return{
studentId:'001'
}
}

子组件：

//子组件
export default {
name: "addStudent",
props: {
studentId: {
type: String,
default: '',
}
},
}
//子组件输出为父组件传过来的值
console.log(this.studentId) //001

4、完整代码：

//父组件
<add-student
ref="studentDialog"
:is-show="showStudentDialog"
:student-id="studentId"
></add-student>
//js
import addStudent from "./components/addStudent";
export default {
components: {
addStudent
},
}
//子组件
export default {
name: "addStudent",
props: {
studentId: {
type: String,
default: '',
}
},
}

2、子组件返回值及调用父组件方法

1、返回值
子组件调用父组件的方法

this.$emit(父组件方法名，返回值)

<el-dialog
title="选择学生"
:visible.sync="isShow"
>
<el-table
:data="studentData.content"
@selection-change="handleSelectionChange"
ref="dataTable"
row-key="id"
>
...
</el-table>
</el-dialog>
export default {
data(){
stuSelection:[]
},
props: {
isShow: {
type: Boolean,
default: false,
},
}
methods: {
cofirmStudent(){
//stuSelection为选中的学生列表，返回选中的列表
this.$emit("selectStudent", this.stuSelection);
console.log(this.stuSelection) //[001,002]
},
closeDialog(){
//调用关闭父组件关闭当前弹窗的方法
this.$emit("closepop");
}
}
}

2、父组件命名方法
父组件用@xxx命名子组件可调用的方法

<add-student
ref="studentDialog"
:is-show="showStudentDialog"
@closepop="closepop"
@selectStudent="selectStudent"
></add-student>
//js
closepop() {
this.showStudentDialog = false;
},
selectStudent(selectStudent) {
console.log(selectStudent) //[001,002]
},

最后

以上就是踏实玉米为你收集整理的vue实现父子组件的互相传值及调用方法的全部内容，希望文章能够帮你解决vue实现父子组件的互相传值及调用方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。