props

  • 用于接收父组件传递的值

  • 在使用 的单文件组件中,props 可以使用 defineProps() 宏来声明:

const props=defineProps(['foo'])console.log(props.foo)
  • 在没有使用 的组件中,prop 可以使用 props 选项来声明(和vue2一致):

export default {props: ['foo'],setup(props) {// setup() 接收 props 作为第一个参数console.log(props.foo)}}
  • 传递给 defineProps() 的参数和提供给 props 选项的值是相同的,两种声明方式背后其实使用的都是 prop 选项。

  • 除了使用字符串数组来声明 prop 外,还可以使用对象的形式,如下:

对传入的props的几种校验方式

// 使用 defineProps({title: String, // 属性名: 其对应的数据类型likes: Number,propB: [String, Number], // propB可以是字符串或者数字类型的一种propC: { // 更加详细的定义type: String, // 类型required: true// 是否必传},// Number 类型的默认值propD: {type: Number, // 类型default: 100// 指定默认值},// 对象类型的默认值propE: {type: Object, // 类型// 对象或数组的默认值// 必须从一个工厂函数返回。// 该函数接收组件所接收到的原始 prop 作为参数。default(rawProps) {return { message: 'hello' } // 对象默认值}},// 函数类型的默认值propG: {type: Function, // 类型// 不像对象或数组的默认,这不是一个工厂函数。这会是一个用来作为默认值的函数default() { // 这个直接就是一个默认函数return'Default function'}}})// 非 export default {props: {title: String,likes: Number}}

细节总结:

  1. 所有prop默认都是可选的,可传可不传,如果声明了required: true,则该属性就是必须传的,否则警告

  1. 除 Boolean 外的未传递的可选 prop 将会有一个默认值 undefined。

  1. 布尔类型的数据未传递时prop将被转换未false,可以通过为它设置default来更改,比如说设置default:undefined与非布尔值的数据默认值相一致

传递prop的几个细节:

  1. prop的名字很长的话,应该使用小驼峰(camelCase )的形式,在传递时可以使用烤肉串(kebab-case)方式进行传递

// 父组件// 传递 烤肉串方式,为了和html attribute对齐​// 子组件defineProps({greetingMessage: String // 通过小驼峰的方式接收})​// 使用方面也是小驼峰的方式{{ greetingMessage }}
  1. 传递数据有两种,静态和动态

  • 所谓静态就是,数据直接就是死的,例如

 // 直接传递一个字符串
  • 动态就是先定义再传

 // 通过v-bind或者:动态绑定​import ComponentOne from '../src/components/zujianup/ComponentOne.vue'import { ref } from'vue'const title=ref('123')
  1. 不同值类型的传递

  • Number

  • Boolean

 // 如果传递的数据是true时,可以直接写传递的属性名即可 // 传递的false需要书写完整 // 传递已经定义的值
  • Array

 // 直接传递一个数组 // 传递一个存在的数组
  • Object

// 和数组类似,不多做解释了
  • 使用一个对象绑定多个prop

// 定义const post = {id: 1,title: 'My Journey with Vue'}// 传递 // 直接v-bind传递// 相当于// 子组件接收 -- 分开声明,不能直接定义一个post: Ojectconst props = defineProps({id: Number,title: {type: String,required: true}})

单项数据流

  • props传递的数据是只读的,不可修改,否则后台会警告

  • 单项数据流的本意就是当父组件更新后,子组件的props也会跟着获取最新的值,不能去修改,如果去更改会警告

  • 对于复杂数据类型而言,虽然可以更改并且也不会警告,但也不建议这样去做

  • 这其实卡了复杂数据类型地址不变的bug,虽然可以,但也有很大的性能损耗,得不偿失