Vue3-Props特性

Props特性

允许组件的使用者在外部传递，实现各种各样的功能

Props的声明

看官网介绍很详细

Props | Vue.js (vuejs.org)

TypeScript 与组合式 API | Vue.js (vuejs.org)

单向数据流

（1） 所有的Props都遵循单项绑定的原则，props会因父组件的更新而变化，自然的向下流往子组件，但是不会逆向传递。

（2）每次父组件更新后，所有子组件中的props都会被更新到最新值，这意味着不该在子组件中去更改一个prop，否则会跑出警告、

导致你想要更改一个 子组件prop 的需求通常来源于以下两种场景：

​ 1) 子组件想要更改父组件传递过来的值，这种情况下最好重新定一个局部数据属性，从props上获取初始值即可

const props = defineProps(['initialCounter'])

// 计数器只是将 props.initialCounter 作为初始值
// 像下面这样做就使 prop 和后续更新无关了
const counter = ref(props.initialCounter)

2)需要对传入的prop值做进一步的转换。在这种情况下，最好是基于该prop值定义一个计算属性。

const props = defineProps(['size']);
// 该 prop 变更时计算属性也会自动更新
const normalizadSize = computed(() => {
  props.size.trim().toLowerCase()
})

Props校验

Vue组件可以更细致的声明对传入Props的校验要求。

例如：

defineProps({
  // 基础类型检查
  // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
  propA: Number,
  // 多种可能的类型
  propB: [String, Number],
  // 必传，且为 String 类型
  propC: {
    type: String,
    required: true
  },
  // Number 类型的默认值
  propD: {
    type: Number,
    default: 100
  },
  // 对象类型的默认值
  propE: {
    type: Object,
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default(rawProps) {
      return { message: 'hello' }
    }
  },
  // 自定义类型校验函数
  propF: {
    validator(value) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  // 函数类型的默认值
  propG: {
    type: Function,
    // 不像对象或数组的默认，这不是一个
    // 工厂函数。这会是一个用来作为默认值的函数
    default() {
      return 'Default function'
    }
  }
})