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