关于自定义组件的那些事儿

自定义组件的原理

运行基本原理

自定义组件的具体建立方法，hello world示例，请参考智能小程序官网：

smartprogram.baidu.com/docs/develo…

了解原理以前，咱们来看一下自定义组件中的js构造器：

以上包括了自定义组件的逻辑部份内容，开发者能够在Component构造器的各个生命周期回调函数中，编写本身的逻辑代码。

在Component构造器中写的自定义组件的原型，运行在小程序的逻辑层(jscore)中，并不与本身的

swan模板运行在一块儿--swan模板运行在视图层(webview)中。

因此，setData等操做，都是经过数据通信，将要设置的数据传递到真正的视图层，而后进行自定义组件的渲染。同理，全部的生命周期，也是当组件的模板在视图层渲染完毕以后，传递回逻辑层进行触发的。

因此对于setData的调用，也如同页面的setData同样，须要谨慎调用。由于每一次setData都意味着一次jscore与webview的数据通信。

类 or 累？

看过自定义组件基本使用方法的同窗确定知道，自定义组件内使用的样式类是独立空间，即： 组件模板中使用的css样式类并不会应用上使用该自定义组件的页面上的样式类。

emmmmm，若是上面那句话把你绕晕了，咱们来看一下例子：

​展现效果以下：

展现效果以下：

咱们能够看到，虽然都是渲染到同一个页面上，可是页面上定义的样式类，在组件中并无生效。

那么一样的，在组件中定义的类，也不会透出去，影响整个页面，例：

效果以下：

那么这个“隔离“是如何作到的呢？ 咱们仔细观察一下自定义组件最后生成的模板和样式：

真相大白，原来是自定义组件中使用的样式类，都被编译增长了前缀。这才使内外的类能够互相隔离。这种设计也有好处也有缺点，好处就不用再想以前用不少框架那样本身去寻找解决方案(如：CSSinJS或css modules)自定义组件中直接集成了内置解决方案。坏处就是可能有些css上的使用限制，好比（摘自官网）：

这块也请读者在开发过程当中多注意。

TIPS: 关于css的解决方案，官方貌似还在持续优化，相信不久就能够迎来限制更小的集合了。

组件间的通信

父子自定义组件之间，能够使用两种方式进行通信：

• 利用自定义事件
• 利用dispatch消息

利用自定义事件

利用自定义事件在父组件中进行事件的绑定，在子组件中进行自定义事件的派发。 例：

dispatch消息

经过 dispatch 方法，组件能够向组件树的上层派发消息。消息将沿着组件树向上传递，直到遇到第一个处理该消息的组件，则中止。经过 messages 能够声明组件要处理的消息。messages 是一个对象，key 是消息名称，value 是消息处理的函数，接收一个包含 target(派发消息的组件) 和 value(消息的值) 的参数对象。 (摘自san官网)

若是组件有消息须要一直向上透传，则能够使用这个方法，只要没有组件组件拦截，消息则会一直向上传递。

例：

其中根组件中使用了父组件，父组件中使用了子组件。当子组件调用dispatch方法时，则会一直传递到根组件上（由于父组件并无message消费本次dispatch）。

至于父组件想通知子组件嘛，能够经过props的改变，来触发子组件。

经过上述两种方式都可以实现父子组件的通信，固然，各位读者也能够试试本身引入事件流，或者其余三方库，来丰富本身的应用通信方式。