<template> <div class="student"> <h2>学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> <button @click="sendStudentName">把学生名给App</button> <button @click="unbind">解绑atguigu事件</button> </div> </template> <script> export default { name: 'Student', data() { return { name: '张三', sex: '男' } }, methods: { sendStudentName() { //触发Student组件实例身上的atguigu事件 this.$emit('atguigu',this.name,666,888,999) }, unbind() { this.$off('aiguigu') } } } </script> <style lang="less" scoped> .student { background-color: pink; padding: 5px; } </style>

这是一个Vue单文件组件，包含了模板、脚本和样式三个部分。

模板部分定义了一个名为"Student"的div元素，包含学生姓名、学生性别两个h2元素和两个button元素。其中，@click绑定了两个方法，分别为sendStudentName和unbind。

脚本部分定义了一个名为"Student"的Vue组件，包含了name、data和methods三个属性。其中，name属性为组件名，data属性定义了一个包含name和sex两个属性的对象，methods属性定义了两个方法，分别为sendStudentName和unbind。在sendStudentName方法中，通过$emit方法触发了一个名为"atguigu"的自定义事件，并传递了4个参数。

样式部分定义了.student类的样式，包括背景颜色和内边距。其中，scoped属性表示该样式只作用于当前组件。