如何理解Vue中组件的自定义事件

本篇文章为大家展示了如何理解Vue中组件的自定义事件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

<template>
  <div >
    <h3>{{msg}}</h3>
    <!-- 通过父组件给子组件传递函数类型的数据props实现：子给父传递数据 -->
<School :getName="getName"/>
<Student :getStudentname="getStudentname"/>
<!-- 通过父组件给子组件绑定一个自定义事件：实现子给父传递数据 -->
<Age v-on:elderSex="demo"/>
<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法：使用ref） -->
   <!-- <Student ref="student"/> -->
  </div>
</template>
<script>
import School from './components/School.vue'
import Student from './components/Student.vue'
import Age from './components/Age.vue'
export default {
name:'App',
components:{ School,Student ,Age},
data(){
  return {
    msg:'你好，世界！'
  }
},
methods:{ 
  getName(name){
    console.log('App收到了名字',name);
  },
  getStudentname(name1){
    console.log('接收到了学生的姓名',name1);
  },
  demo(sex1){
    console.log( 'demo被调用了',sex1);
  }
},
// mounted() {
  //绑定自定义事件
//   this.$refs.student.$on('elderSex',this.schoolAge)
//绑定自定义事件（一次性）
//   this.$refs.student.$once('elderSex',this.schoolAge)
// },
}
</script>
<style scoped>
</style>

<template>
  <div class="demo">
    <h3>学生姓名：{{name}}</h3>
    <h3>学生年龄：{{age}}</h3>
    <button @click="sendStudentname">把学生的名字给APP</button>
  </div>
</template>
<script>
  export default {
    name: 'Student',
    props: ['getStudentname'],
    data() {
      return {
        name: '张三',
        age: 19
      }
    },
    methods: {
      sendStudentname() {
        this.getStudentname(this.name)
      }
    }
  }
</script>
<style>
  .demo {
    background-color: skyblue;
  }
</style>

上述内容就是如何理解Vue中组件的自定义事件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。