如何巧妙结合Vue组件的props与data实现功能扩展？

本文共计1552个文字，预计阅读时间需要7分钟。

目录组件中props与data的结合使用子组件中data从props中动态更新数据组件中props与data的结合使用如前所述（vue组件属性（props）及私有数据data）在vue组件中，props是组件共有的属性，对外提供数据，而data是组件内部的数据，用于组件内部的数据处理。以下是如何结合使用props和data的示例：

1. 父组件向子组件传递props

2. 子组件接收props并使用data

{{ message }}

3. 子组件中data从props中动态更新数据

{{ childMessage }}

目录

• 组件中props与data的结合使用
• 子组件中data从props中动态更新数据

组件中props与data的结合使用

如前所述（vue组件属性（props）及私有数据data），vue组件中，props是组件公有属性，对外；data是组件的私有数据，对内。正因为props对外，由外部赋值，因此在组件内部，是只读的，即组件内部不适宜去改变这些元素的值。当然，改也可以改，但运行时刻会有告警。

正如我们写一个函数，对于传入的参数，我们一般是只读对待的，极少会去修改它的值一样。当然，这只是一种编码约定，你硬是要改，也无话可说，改了就改了。

同时，props是在开发时，预先设置好，传给组件的。在运行过程中，这些设置是一锤子买卖，以后就不起作用了。