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 false
      if (obj.username && typeof obj.username !== 'string') return false
      if (obj.age && typeof obj.age !== 'number') return false
      return true
    }
  }
})
const updateUser = () => {
  emit('update-user', { username: 'Alan', age: 23 })
}
</script>