组件通信-props配置

定义：props 是 Vue 组件之间传递数据的一种方式，主要用于父组件向子组件传递数据。它是子组件从父组件接收数据的接口。

功能：从父组件接收数据（如字符串、数字、对象等），供子组件使用。

传递方式：通过父组件的标签属性传递给子组件。

规则：

单项数据流：数据只能从父组件传递到子组件，子组件不能直接修改父组件传来的 props。

类型校验：支持类型校验（如 String、Number、Object 等），确保传递的数据类型符合预期。

使用场景：适用于父子组件通信，父组件向下传递数据给子组件，子组件根据 props 渲染界面或执行逻辑。

下面简单演示props的作用：

定义单文件组件School.vue,并在App.vue中引入该组件，此刻形成浙江爱你西，父组件为App.vue，子组件为School.vue。

在父组件中引入子组件后，在子组件标签内定义属性数据，子组件School将使用props配置进行接受数据：

School.vue:

App.vue:

运行展示：

注意1：其中定义数字类型的属性数据，使用v-bind指令进行绑定（App.vue中第3行age的属性定义），在子组件中展示了三种props接收数据方式，要清楚三种接收方式的区别。三种方式根据开发场景进行选择。

注意2：为防止后台报错，尽量避免去修改props传入的数据，如果要改，如下操作展示：

修改传入数据原理：使用props配置传入数据，vc会优先渲染props传入的参数，如果我们要修改props传入的数据，可以在在该子组件中的标签修改属性名称，使用this在data{}中return声明目标属性，将传入的数据值对应传给目标属性。

在School.vue中实行操作：修改了年龄为本组件定义的数据，用其来接收父组件传递过来的数据，而且本组件定义的数据修改数值，不会影响父组件传递过来的数据。

运行效果：

单击按钮，页面年龄数据发生改变，父组件中的数据不会引起改变。

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。