Vue3-defineProps()方法

一、前言

1.在vue2中，我们使用选项api中的props来接受父组件传递来的数据。

2.在vue3的setup中，我们使用defineProps来定义父组件传递的props

二、defineProps

1.defineProps在vue3的组合式api中，使用时需要导入

import { defineProps } from 'vue'

2.defineProps是一个函数，参数与vue2的props选项相同

defineProps({
	msg:String,
	name:{
		type:String,
		require:true,
		default:'xxxx'
	}
})

3.定义后props可直接在模板中使用，或者在setup其他地方使用

<template>{{ msg }}</template>

const props= defineProps({
	msg:String,
	name:{
		type:String,
		default:'xxxx'
	}
})

console.log(props.name)
props.name = 123 //不能修改，声明的props的值是只读readonly的

4.由defineProps定义出的props对象，是一个proxy对象，所有特性和reactive基本相同，只不过由defineProps定义出的props对象的值是只读的，还有在模板上可以单独属性直接使用

三、注意事项

1.defineProps只能在setup中使用，且只能在setup的顶层使用，不能在局部作用域使用

2.和vue2一样的原则，defineProps声明的props的值是只读readonly的，不能修改，也就是说，当传过来的是原始值时不能修改，当是对象类型时，不能修改对象类型的引用地址。