组件系统实现原理

[杨小福]

组件系统功能说明：

• 全局组件
• 局部组件
• 组件间参数传递(props)

组件系统结构

组件按父子关系形成一个组件树，父子组件具有自己的上下文即他们有自己的viewModel结构(可能是一个单独的vm实例，也可能是vm树形结构)，父子之间的数据是不能直接访问的。

当数据发生变化时，组件单独更新。

组件编译

以<hello-world></hello-world>组件为例，当解析该组件的时候，对该组件进行编译并将编译后的结果替换<hello-world></hello-world>自定义标签，这样就将父子组件关联起来。

说明，因为是自定义标签，所以需要声明组件名，以此和自定义标签名关联起来。因为html规范中不区分大小写，所以只能以中横线的形式命名，考虑到编码方面的便利，需要在驼峰和中横线直接进行转换。

组件间通信

<hello-world  name='hello-world-component' :msg='message'></hello-world>`

通过props传递信息，支持静态属性和动态属性。

如上:msg即为动态属性，message对于父组件的一个属性，当message发生变更时，子组件能够监听到变化并自动更新。

具体实现还是通过$watch方法来监听即可，在子组件中watch父组件的值，当发生变化时触发自身指令的更新即可。

[zhengcaiyun]

importance always in the end.