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]
 },