vue3深入组件：props

Props使用

1、组件需要声明它接收的props,vue才知道外部传入了哪些参数。
2、在使用<script setup>的单文件组件中，使用defineProps来声明组件接收的参数。

<script setup>
const props = defineProps(['title','message'])
console.log(props.title)
</script>
<template>
<div>{{message}}</div>
<div>{{props.message}}</div>
</template>

3、在不使用<script setup>的组件中，可以使用props 选项来声明

export default {
  props: ['title','message'],
  setup(props) {
    console.log(props.title)
  }
}

4、props声明时可校验类型,设置默认值

<script setup>
const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	menuList: {
		type: Array,
		default() {
			return [];
		}
	}
})
console.log(props.title)
console.log(props.menuList)
</script>

注意事项

1、Props 名字格式应该使用小驼峰，在组件中使用kebab-case（小写短横线）；

// 父组件中
<AsideMenu menu-name="home"/>
// 子组件中
<script setup>
const props = defineProps(['menuName'])
console.log(props.menuName)
</script>

2、props遵循单向绑定原则，props因父组件中的更新而变化，在子组件中，数据是只读的，不能更改。

const props = defineProps(['name']);
props.name = 'article management'; // props是只读，禁止修改。