Vue.js自定义事件的使用（实现父子之间的通信）

vue

v-model修饰符：.lazy、.number、.trim

$attrs数据的透传，在组件（这个是写在App.vue中）,数据就透传到student组件中，在template中可以直接使用{{$attrs.students}}获取数据

通过defineProps定义的属性在attrs中就不存在了，通过自定义属性时，最好通过defineProps来声明一下

app.vue中,组件中通过defineProps来进行自定义属性。推荐这种方式。

：表示普通属性，@表示事件的形式

自定义事件

上面的方式在模板中去修改了App.vue的属性（STU_ARR），这种方式不好，好的方式是“自己管理对象”的方式，因此可以使用自定义事件的方式实现

app.vue

以属性的方式将函数传进去，使用props进行接收

在student.vue中

使用事件的方式传递,@del-stu使用这个方式进行事件命名。

我们可以将组件中的方法（app.vue）以自定义事件的形式发送给其他的组件，此时不能通过defineProps接收了

在student.vue中使用方式：

在模板中可以通过$emit()来触发自定义事件

事件定义时使用"-"的命名方式，在使用的时候可以使用驼峰的方式进行使用

自定义事件的使用场景：

当我们需要调用其他组件上的方法，比如app.vue或者其他组件，我们可以通过自定义事件的方式将方法传给需要调用方法的组件，使用emit进行触发调用，很方便。

在一些子组件给父组件传信息的时候，因为props是自上向下传递数据的，父组件给子组件设置props,给子组件传递数据，因此可以使用自定义事件的方式实现父子之间的通信。（props是单向的，但是也是可以实现子传父的操作，需要在父组件中定义一个方法，在合适的时机，子组件触发这个函数，就可以实现子传父的操作，但是实现起来不如自定义事件方便）