Vue.js进阶【7-0】Vue组件component使用props传递数据

Vue.js进阶文章列表

这种传递方式指的是当前Vue页面内有部分实现是另一个Vue组件，这个时候要在当前文件和那个Vue组件之间传递数据

调用Vue文件内部：

1 patientCard是一个组件

2 recentlyPatentinfo是被传递到patientCard中去的数据

3 关键代码是：使用组件patientCard的时候把数据传递给patientCard

<patientCard :dataList="recentlyPatientinfo"></patientCard>

 

上面代码里，在调用代码中的

<patientCard :dataList="recentlyPatientinfo"></patientCard>

 :dataList 前面的冒号，说明这个dataList是patientCard的一个属性，并被绑定到了当前Vue文件中data中的recentlyPatientinfo这个数据对象。从而实现数据传递。

在被调用组件patientCard的Vue文件中，dataList是一个props中的属性，而不是data的一个属性，这个是关键。