[JavaScript知识库]vue3中的props分析

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）

官网地址：Props

props的形式

数组形式：

<my-cpn title="james" :age="12"/>
    
props: ['title', 'age']
//书写简单，但是不能类型检测，不能设置默认值

对象形式：

<my-cpn title="james" :age="12"/>
   
//对象形式一： 只限定类型
props: {
    title: String,
    age: Number
}

//对象形式二： 详细限定
props: {
    title: {
        type: String,          //类型
        default: 'kobe',       //设置默认值
        required: true         //是否必须传递
    }
}

props的单项数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

如果真想对props传递下来的数据进行操作？

就使用组件内部的变量来保存props传递下来的值，然后进行系列操作

// prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用
props: ['initialCounter'],
data() {
  return {
    counter: this.initialCounter
  }
}

//这个 prop 以一种原始的值传入且需要进行转换
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

props验证

注意：

• (null 和 undefined 会通过任何类型验证)

• 对象或数组默认值必须从一个工厂函数获取

props: {
    // 基础的类型检查 
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
      default: function() {
        return 'Default function'
      }
    }
  }

类型检测：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

此外，type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。

function Person(firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

app.component('blog-post', {
  props: {
    author: Person
  }
})

TS + PropType进行类型检测

针对于数组，和对象，我们就只能对类型限定，而不能确定其内部属性的内容的类型，这是不符合TS标准的,所以vue3提供一个泛型接口，用来处理数组和对象

import { PropType } from 'vue'

假如多人的基本信息：

interface UserInfo {
    name: string
    age: number
    hobbies?: string[]
}

以前的做法：

<my-cpn :userListInfo="userListInfo" />
    
props: {
    userListInfo: {
        type: Array   //限定为数组，但是这里是any类型的： any[]
    }
}

vue3正确的做法：

<my-cpn :userListInfo="userListInfo" />
    
props: {
    userListInfo: {
        type: Array as PropType<UserInfo[]>      //类型断言
    }
}