Vue.js组件

Question

如何理解“用户界面完全可以用嵌套的组件树来描述，而一个组件恰恰可以对应MVVM中的ViewModel”这句话？组件到底是什么意思？

Answer 1

如下图，组件就是集成了模板，逻辑和样式的一个东东，它可以在页面内到处复用，自成一个独立的整体。如果把页面比作汽车，组件就可以理解为车轮，方向盘，发动机等等，你的奥迪可以用这个车轮，我的奥拓也可以用。车轮里面也有螺丝，钢圈（子组件），这样一层一层的结构就是嵌套的概念，组件间可以相互嵌套，相互通信。
。

附MVVM基本机制：

Answer 2

我的理解是组件是自定义功能的div块

Answer 3

组件。。。可以认为是可重复的一个单元。。。比如一个对话框，可以在多个地方使用，就可以将其抽象成一个组件，在多个地方使用该组件

Answer 4

在实际项目中，往往入口就只有一个div，其内部全都是由一个个组件嵌套组成。可以简单理解成 vue是个船，组件 就是构建船的各个零件

Answer 5

你可以理解为像封装函数那样封装一些可重用的html代码，在需要用的代码里插入封装好的组件就行，就像你在js用到的封装好的函数一样直接可以调用，不过要先引入

Answer 6

用户界面是很多个组件构成，有些组件可以包含另外的组件，那么整个界面可以看成一个倒置的树。每个组件可以对应一个ViewModel。
组件就是一个独立可复用的原子单元，包括自己所管理的HTML片段和对应的逻辑与样式，同时可以嵌套其他子组件实现更复杂的组件。

Answer 7

组件化开发基于这样一种理念：界面就是数据结构的可视化表达
UI = f(data)

而界面就是组件的组合
UI = f1(data) + f2(data) + f3(data) + ...

所以组件就是函数，给定输入，返回输出。React 组件就是函数式的。
viewmodel 就是实现 data=>UI 映射关系的那个 f