Vue组件中如何区分props和私有data属性？

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

目录 + props + 1、组件Comp1.vue + 2、使用了Comp1的页面 + 3、运行结果 + data + 子组件中data和props的区别 + Vue组件中，props是公共属性，主要对外的，相当于类中的get、set方法操作的性质；data是私有数据，是组件内部使用的。

目录

• props
• 1、组件Comp1.vue
• 2、使用了Comp1的页面
• 3、运行结果
• data
• 子组件中data和props的区别

vue组件中，props是公有属性，主要对外，相当于类里面的get、set方法操作的属性；data是私有数据，主要供组件内部访问。

vue作为一种前端开发框架，组件是其中的主角吧。其实任何一种前端框架，除了vue，还有react，组件都应该是主角。为啥呢，因为组件最能体现面向对象思想，单一职责，良好的封装性，高内聚，低耦合，利于复用和维护，提升开发效率，符合人类思维模式。。。好处多多。

所谓的前端，就是跑在浏览器一侧的代码。以前的前端代码，写的时候是什么样，最终运行的时候就是什么样，完全由浏览器解释运行，所以也叫静态页面。现在的前端开发框架完全不是这样，它类似于服务器端的开发模式，代码写好之后，需要编译、发布。这就为代码的组件化创造了条件。如果想完全用html,js这类纯原生的代码实现复用，是非常困难的。