父组件使用props传递数据给子组件，子组件给父组件通信除了通过父组件提前给子组件传递一个函数，子组件使用该函数，利用传递参数的形式给父组件传值，回调在父组件中，
这里再提供一种方法：Vue的自定义事件，本文将详细介绍Vue自定义事件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）
绑定自定义事件的方式
❤️ 第一种方式 ❤️
在父组件中：
<Student @atguigu ='test' /> 或 <Student v-on:atguigu = 'test'>
methods:{
//除了接受第一个参数，其他参数都放在数组里面
test(name, ...params) {.....}
}
❤️ 第一种方式 ❤️
在父组件中：
<Student ref ='demo' />
methods:{
//除了接受第一个参数，其他参数都放在数组里面
test(name, ...params) {.....}
}
mounted() {
this.$refs.demo.$on('atguigu',this.test)
}
子组件触发自定义事件
this.$emit('atguigu',this.name, this.sex, 800)
// 子组件触发自定义事件的时候可以传递多个参数
解绑自定义事件
❤️ 解绑一个自定义事件：this.$off('atguigu')
❤️ 解绑多个自定义事件：this.$off(['atguigu', 'demo'])
❤️ 解绑所有的自定义事件：this.$off()
组件上也可以绑定原生DOM事件，需要使用native修饰符
<Student ref = "student" @click.native="show">
注意事项：
通过this.$ref.xxx.$on('atguigu',回调)。绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题
完整案例
App.vue父组件
<template><div class="bgq"><h1>{{ atguigu }}-{{studentname}}</h1><!-- 通过父组件给子组件绑定一个自定义事件实现：子给父专递数据(第一种写法使用@)添加once的话就是只触发一次@atguigu.once --><!-- <Student @atguigu="getStudentName" @demo="m1" /> --><!-- 通过父组件给子组件绑定一个自定义事件实现：子给父专递数据(第二种写法使用ref) --><Student ref="student" @click.native="show" /></div></template><script>import Student from "./components/Student.vue";export default {name: "App",components: { Student },data() {return {atguigu: "你好啊",studentname: "",};},methods: {getStudentName(name, ...params) {//除了接受第一个参数，其他参数都放在数组里面console.log("收到了学生的名字", name, params);this.studentname = name;},m1() {console.log("demo被触发了");},show(){alert('我是被绑定在组件上面的原生的DOM事件')}},mounted() {//绑定自定义事件//3秒后出发// setTimeout(() => {// this.$refs.student.$on("atguigu", this.getStudentName);// }, 3000);//正常触发this.$refs.student.$on("atguigu", this.getStudentName);//只触发一次// this.$refs.student.$once("atguigu", this.getStudentName);},};</script><style scoped>.bgq {background-color: skyblue;padding: 5px;}</style>
Student.vue子组件
<template><div class="bg"><h2>学生名称：{{ name }}</h2><h2>学生性别：{{ sex }}</h2><h2>number: {{ number }}</h2><button @click="add">点我number子加</button><button @click="sendStudentName">点我获得学生的姓名</button><button @click="unbind">解绑atguigu事件</button><button @click="dath">点我摧毁Student组件的饿实例对象vc</button></div></template><script>export default {name: "Student",data() {return {name: "张三",sex: "男",number: 0,};},methods: {//原生dom事件增加add() {console.log("我是原生DOM事件，即使Student组件被摧毁了，我还是会调用，但是页面不会输出");this.number++;},sendStudentName() {//触发student组件实例身上的auguigu事件 传递多个参数this.$emit("atguigu", this.name, this.sex, 800);//触发damo事件this.$emit("demo");},unbind() {//解绑atguigu事件，只能解绑一个自定义事件// this.$off('atguigu')//解绑多个自定义事件this.$off(["atguigu", "demo"]);//解绑所有的自定义事件// this.$off();},dath() {//摧毁了stedent的实例对象vc，摧毁后所有的Student身上的自定义事件不起效果this.$destroy();},},};</script><style scoped>.bg {background-color: plum;padding: 5px;margin-top: 10px;}</style>
