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是单向的，但是也是可以实现子传父的操作，需要在父组件中定义一个方法，在合适的时机，子组件触发这个函数，就可以实现子传父的操作，但是实现起来不如自定义事件方便）