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