vue3+ts深入组件（一）Props

一、Props 声明

一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute

在使用SFC时，props 可以使用 defineProps() 宏来声明：

如子组件中
(1)
const props = defineProps(['foo'])

(2)
const props = defineProps({
    title:String,
    age:Number
})
(3)搭配ts 可使用类型标注
const props = defineProps<{
    title:String,
    age?:Number
}>()

二、传递静态prop（只能是字符串）

父组件
<Cpn say-hello="Hello"  />

子组件中
const props = defineProps<{
sayHello:String
}>

注意：vue3官方文档中介绍，prop 与事件的名字也提供了自动的格式转换。
子组件中用camelCase 形式命名
但在父组件中可以使用 kebab-case 形式来监听。
与 prop 大小写格式一样，在模板中我们也推荐使用 kebab-case 形式来编写监听器。
即 addEvent 会自动解析为add-event 并且由于代码位置及风格匹配，提高了模板的可读性
官方推荐利用这种代码特性 来书写 prop 及事件
本文中即为：（sayHello 与say-hello）

三、传递非字符串类型，使用v-bind

如传递数组
<Cpn :names=['A','B','C']>
传递数字
<Cpn :num="24">
传递对象
<Cpn :author="{
    name:'Asen',
    age:'20'
}">

你可以使用一个对象绑定多个prop并传递参数

const prop = {
    name:'Asen',
    age:'20'
}

模板中
<Cpn v-bind="prop">

四、prop校验

在子组件中可以进行校验

const 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'
    }
  }
})

五、单向数据流

子组件中不允许直接修改父组件传递过来的参数（会抛出错误）
如需修改，可以在子组件中先获取到传递过来的值以后再次进行修改

const props = defineProps({
    name:"Asen"
})

const myname = ref(props.name)

此时再次修改myname 即可

文末
新人创作，还望支持！欢迎学习交流，如有错误，还请指正！
已更新于2022/11/22