自定义组件

创建自定义组件

开发者可以将页面内的功能模块抽象成自定义组件，在智能小程序的各个页面中进行使用，提升代码复用度，节省开发成本。组件的开发和一般的界面基本没差别，也是这四个文件。

component内的详细属性可以查看官网：https://smartprogram.baidu.com/docs/develop/framework/custom-component_comp/
第一步：在 json 文件中进行自定义组件声明（在 json 文件中将 component 字段设为 true 可将这一组文件设为自定义组件）

第二步：在 swan 文件、js文件、css文件中编写组件模板



至此，我们的自定义组件就已经创建完毕了。
第三部：在page里引用我们创建好的组件，当然也可以组件中引用其他组件
先在page页面的json里导入组件

然后在page的swan中像使用基础组件一样使用自定义组件

当然，传递的参数也可以是动态的：

组建模板和样式

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。

在组件模板中可以提供一个 节点，用于承载组件引用时提供的子节点。

这样就可以在模板标签中插入其他内容了

一个组件也可以包含多个slot，并通过命名进行区别使用：
在模板文件中给slot一个name属性

在使用时对号入座

tips: slot使用时的数据环境：
一般情况下，都是谁使用这个组件，slot内的环境就依赖于使用者，如：


这种情况下，{{name}}值为Page里的name;
如果希望slot里的数据属于组件的话，可以在slot 声明中包含 s-bind 或 1 个以上 var- 数据前缀声明：

组件样式
组件的样式，可以在组件的 css 文件中编写，并且只对当前组件内节点生效。使用时，需要注意以下几点：

• 只可以使用 class 选择器，其他的选择器，请改为 class 选择器实现；
• 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用；
• 继承样式，如 font 、 color，会从组件外继承到组件内。
  如果希望组件接受外部传入的样式，可以在 Component 中用 externalClasses 定义若干个外部样式类：
  创建组件时这么写：
  
  引用时，这么用：
  
  如果希望外部所有的样式都能影响到组件内部，可以使用全局样式属性：
  
  
  组件间的通信与事件
  组件间的基本通信方式有以下几种：
• 在父组件中可以通过设置子组件的 properties 来向子组件传递数据；这个上面已经实现了
• 在父组件中定义 messages 对象，对子组件 dispatch 方法进行拦截，从而达到子组件向上通信；

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

• 子组件可以通过 triggerEvent 方法触发父组件的自定义事件进行传参；
  子组件中：
  

父组件中：

• 如果以上几种方式不足以满足需要，父组件还可以通过 this.selectComponent
  方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。
  组件的生命周期：
  
  behaviors
  behaviors 用于组件间代码共享，类似于一些编程语言中的“mixins”或“traits”
  数据监听器
  类似与vue里的watcher，小程序里写在observers下，用了处理某个数据发生变化后，其他数据的动态改变。