如何理解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中组件的自定义事件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。