我们可以通过使用给组件绑定事件，当组件触发该事件时，就能进行值得返回
我们可以使用v-on属性来给子组件绑定自定义事件，此时该事件就会存在vc中，然后通过this.$emit来触发绑定的事件，
这样就能实现不需要app.vue来给子组件传参的复杂形式来实现方法的调用
也可以使用ref来绑定事件，并且ref更为灵活，并且能实现延迟绑定等功能
App.vue
<template>
<div class="app">
<h1>{{msg}}</h1>
<!-- 通过 v-on 给子组件绑定一个事件 -->
<!-- <student v-on:atguigu="sendStudentName"></student> -->
< student ref = "student" ></ student >
<school :getSchoolName="getSchoolName"></school>
<hr>
</div>
</template>
<script>
import Student from './components/Student.vue'
import School from './components/School.vue'
export default {
name: 'App',
components: { Student, School },
data(){
return{
msg:"hello"
}
},
methods:{
getSchoolName(name){
console.log('App收到了学校名',name)
},
sendStudentName(name){
console.log('sendStudentName事件被触发了',name)
}
},
mounted (){
setTimeout (() => {
this . refs** **.** **student** **.** **on ( 'atguigu' , this . sendStudentName )
}, 3000 )
}
}
</script>
<style>
/* 配置全局样式 */
.app {
background-color: gray;
}
</style>
Student.vue
<template>
<div class="Student">
<h2 >学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}</h2>
<button @click="sendStudentName">点击获取学生姓名</button>
</div>
</template>
<script>
export default {
name:'Student',
data(){
return{
name:'李四',
sex:"男"
}
},
methods: {
sendStudentName (){
// 使用 $emit 来触发 Student 组件中 vc 的 atguigu 方法
this . $emit ( 'atguigu' , this . name )
}
}
}
</script>
<style scoped>
.Student{
background-color: orange;
}
</style>
使用$off来接触绑定的事件
