v-on:xxx="" ：绑定
this.$emit('xxx') : 触发
this.$off() : 解绑
App.vue
<template>
<div class="app">
<h1>{{msg}}</h1>
<!--通过父组件给子组件传递函数类型的props实现：子给父传递参数-->
<School :getSchoolName="getSchoolName"/>
<!--通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或者v-on）-->
<Student v-on:liner="getStudentName"/>
</div>
</template>
<script>
import Student from "./components/Student";
import School from "./components/School";
export default {
name: "App",
components:{
Student,
School
},
data(){
return {
msg:'你好啊！'
}
},
methods:{
getSchoolName(name){
console.log("App收到了学校名",name)
},
getStudentName(name,...params){
console.log("App收到了学生名",name,params)
}
}
}
</script>
<style>
.app{
background-color: gray;
padding: 5px;
}
</style>Student.vue：通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或者v-on）， this.$emit触发
<template>
<div class="student">
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<button @click="sendStudentName">把学生名给app</button>
</div>
</template>
<script>
export default {
name: "MyStudent",
data(){
return {
name:'张三',
sex:'男'
}
},
methods:{
sendStudentName(){
//触发Student组件实例身上的liner事件
this.$emit('liner',this.name,111,222)
}
}
}
</script>
<style scoped>
.student{
background-color: orange;
padding: 5px;
margin-top: 30px;
}
</style>
School.vue：通过父组件给子组件传递函数类型的props实现：子给父传递参数
<template>
<div class="school">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="sendSchoolName">点击提交学校名称</button>
</div>
</template>
<script>
export default {
name: "MySchool",
props:[
'getSchoolName'
],
data(){
return {
name:'山河学aaa',
address:'山河四省'
}
},
methods:{
sendSchoolName(){
this.getSchoolName(this.name)
}
}
}
</script>
<style scoped>
.school{
background-color: aqua;
padding: 5px;
}
</style>
解绑：
// this.$off('liner')//解绑一个自定义事件
// this.$off(['liner','demo']) //解绑多个自定义事件
this.$off() //解绑所有的自定义事件
Student.vue
<template>
<div class="student">
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<button @click="sendStudentName">把学生名给app</button>
<button @click="unbind">解绑liner组件</button>
</div>
</template>
<script>
export default {
name: "MyStudent",
data(){
return {
name:'张三',
sex:'男'
}
},
methods:{
sendStudentName(){
//触发Student组件实例身上的liner事件
this.$emit('liner',this.name,111,222)
this.$emit('demo')
},
unbind(){
// this.$off('liner')//解绑一个自定义事件
// this.$off(['liner','demo']) //解绑多个自定义事件
this.$off() //解绑所有的自定义事件
}
}
}
</script>
<style scoped>
.student{
background-color: orange;
padding: 5px;
margin-top: 30px;
}
</style>
总结：
