vue企业开发实战 第七章组件详解（使用props传递数据）

单文件组件

        Vue单文件组件是指把一个组件的所有相关内容（包括 模板 、脚本和样式）放在一个单独的.vue文件中。通过这种方式，我们可以把组件的结构、样式和行为都聚合在一起，方便管理和维护。 每个.vue文件实际上包含三个部分： 模板（Template）：定义了组件的HTML结构，用于展示组件的内容。 脚本（Script）：包含了组件的逻辑代码，实现了组件的功能和交互。

使用props传递数据

        父组件的模板中包含子组件，父组件要正向地向子组件传递数据以及参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作，这个正向传递数据的过程就是通过props来实现的。

在子组件中，使用选项props来声明需要从父级接收的数据

props的值可以是两种

1.字符串数组

2.对象

为什么子组件的数据要从父组件传递过来

在大型项目中组件会有很多，而且大部分数据都是由后台数据库提供，如果每个组件都去向服务器获得数据，这样做无疑是比较浪费效率的 所有的数据都在页面级的组件向服务器进行获得，子组件需要数据，可以由父组件将需要的数据传递给子组件，这样处理的话项目中的数据利于管理

以大觅列表页与列表项目组件为例，进行演示选项props的使用

可以使用指令v-bind来动态绑定props的值，当父组件的数据变化时，也会传递给子组件 

父组件代码：

子组件代码：（使用props接收到父组件的message信息之后用{{message}}输出查看结果）

效果如下：