Vue 3.x 可选的 props 声明

Question

可选的 props 声明

官方英文 markdowm 文件

When a component has no props declarations, all attributes passed by the parent are exposed in this.$props . Unlike declared props, they will NOT be exposed directly on this . In addition, in this case this.$attrs and this.$props will be pointing to the same object.

<template>
  <div>{{ $props.foo }}</div>
</template>

// If the component has no other options, the entire `<script>` block can be dropped, so the following would be a valid SFC
<script>
export default {}
</script>

函数式组件

Similar to stateful components, when props are declared, the props arguments will only contain the declared props - attributes received but not declared as props will be in the argument ( attrs ):

const FunctionalComp = (props, slots, attrs) => {
// const FunctionalComp = (props, { slots, attrs }) => { 难道不是这样吗
  // `attrs` contains all received attributes except declared `foo`
}
FunctionalComp.props = {
  foo: Number
}