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

vue

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

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

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

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

<script setup>const props = defineProps(["students"])//删除const delStuHandler = (index)=>{if(confirm("确认删除？")){props.students.splice(index,1)}}
</script>
<template>
<tr v-for="(stu,index) in props.students"><td>{{stu.id}}</td><td><a href="#" @click.prevent="delStuHandler(index)"></a></td>
</tr>
</template>

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

自定义事件

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

app.vue

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

<script setup>
import Student from "./components/Student.vue"
import {ref} from "vue"
const STU_ARR = ref([{id:0,name:"1"age:24,gender:"男",address:"河南"},{id:0,name:"1"age:24,gender:"男",address:"河南"},{id:0,name:"1"age:24,gender:"男",address:"河南"}
])
const delStuByIndex = (index)=>{STU_ARR.value.splice(index,1)
}
</script>
<template>
<Student :student="STU_ARR" :fn="delStuByIndex"></Student>
</template>

在student.vue中

<script setup>const props = defineProps(["students","fn"])const delStuHandler = (index)=>{if(confirm("确认删除？")){// props.students.splice(index,1)props.fn(index)}}
</script>

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

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

<script setup>
import Student from "./components/Student.vue"
import {ref} from "vue"
const STU_ARR = ref([{id:0,name:"1"age:24,gender:"男",address:"河南"},{id:0,name:"1"age:24,gender:"男",address:"河南"},{id:0,name:"1"age:24,gender:"男",address:"河南"}
])
const delStuByIndex = (index)=>{STU_ARR.value.splice(index,1)
}
</script>
<template>
<Student :student="STU_ARR" @del-stu="delStuByIndex"></Student>
</template>

在student.vue中使用方式：

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

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

<script setup>const props = defineProps(["students"])const emits = defineEmits(["delStu"])//删除const delStuHandler = (index)=>{if(confirm("确认删除？")){// props.students.splice(index,1)// props.fn(index)emits("delStu",index)}}
</script>
<template>
<tr v-for="(stu,index) in props.students"><td>{{stu.id}}</td><td><!--<a href="#" @click.prevent="$emit('delStu'，index)"></a><a href="#" @click.prevent="emits('delStu'，index)"></a>--><a href="#" @click.prevent="delStuHandler(index)"></a></td>
</tr>
</template>

自定义事件的使用场景：

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

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