Vue3使用props和emit时进行数据验证

本文主要是介绍Vue3使用props和emit时进行数据验证，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

父组件

<template><div class="home"><user-card :user="user" @update-user="updateUser" /></div>
</template><script setup>
import { ref } from 'vue'
import userCard from '@/components/userCard.vue'
const user = ref({username: '张三',age: 18
})
const updateUser = (data) => {user.value = {...user.value,...data}
}
</script><style lang="scss" scoped></style>

子组件

<template><div class="user-card"><h2>用户信息</h2><p><span>姓名:{{ user.username }}</span><span style="margin-left: 20px">年龄:{{ user.age }}</span></p><div class="info"><button @click="updateUser">修改用户信息</button></div></div>
</template><script setup>
defineProps({user: {type: Object,required: true,// 增加校验规则validator(value) {// 如果没值，控制台会给黄线警告// 有值且是对象且包含username和age属性return value.username && value.age}}
})
const emit = defineEmits({// 传值验证'update-user': (obj) => {if (!obj || Object.keys(obj).length === 0) {return false} else {// 如果为false，则不触发emit事件if (!obj.username || !obj.age) return falseif (obj.username && typeof obj.username !== 'string') return falseif (obj.age && typeof obj.age !== 'number') return falsereturn true}}
})
const updateUser = () => {emit('update-user', { username: 'Alan', age: 23 })
}
</script>

这篇关于Vue3使用props和emit时进行数据验证的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---