准备子组件,动态配置子组件数据

<template>
	<div id="app">
		<student name="小明" age="15"></student>
	</div>
</template>
<script>
	import student from './components/student.vue'
	export default {
		name: 'app',
		components: {
			student,
		}
	}
</script>

在子组件 student 中使用 props 接收数据,

<template>
	<div>
		<h1></h1>
		<h2>学生名称:</h2>
		<h2>学生年龄:</h2>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				msg: '我是一个学生',
			}
		},
		props: ['name', 'age']
	}
</script>

页面效果

在 student 子组件,打印 this,

props 配置的另外一种写法:

接收数据的同时对数据进行类型限制

<template>
	<div>
		<h1></h1>
		<h2>学生名称:</h2>
		<h2>学生年龄:</h2>
	</div>
</template>
<script>
	export default {
		name: 'Student',
		props: {
			name: String,
			age: Number
		},
		data() {
			return {
				msg: '我是一个学生',
			}
		},
	}
</script>

在接收数据时,限制接收数据的类型,如果与接收数据的类型不同,则控制台提示报错。

props 的第三种写法:

接收数据的同时对数据进行类型限制 + 默认值的指定 + 必要性的限制

<template>
	<div>
		<h1></h1>
		<h2>学生名称:</h2>
		<h2>学生年龄:</h2>
	</div>
</template>
<script>
	export default {
		name: 'Student',
		props: {
			name: {
				type: String, //name 的类型
				required: true, //name 是必要
			},
			age: {
				type: Number, //age 的类型
				default: 100 //age 的默认值
			}
		},
		data() {
			return {
				msg: '我是一个学生',
			}
		},
	}
</script>

接收到数据不允许进行修改,添加按钮对接收到的年龄进行修改测试

<template>
	<div>
		<h1></h1>
		<h2>学生名称:</h2>
		<h2>学生年龄:</h2>
		<button @click="update">修改接收数据</button>
	</div>
</template>
<script>
	export default {
		name: 'Student',
		props: {
			name: {
				type: String, //name 的类型
				required: true, //name 是必要
			},
			age: {
				type: Number, //age 的类型
				default: 100 //age 的默认值
			}
		},
		data() {
			return {
				msg: '我是一个学生',
			}
		},
		methods: {
			update() {
				this.age = 22;
			}
		},
	}
</script>

点击控制台报错,如图。但是页面数据进行了更新。

如果在 data 中再定义一个 name,控制台会报错如图

更新于