组件 VM

在.cml 文件 <script /> 代码块export default的对象实例，可用于定义组件，指定组件的属性、数据、方法等。

  1. cml init component
  2. 选择普通组件
  3. 输入 component-tag-name

定义如下：

字段名类型说明
propsObject声明当前组件可接收数据属性 props = { type, default } type为数据类型，default为数据默认值
dataObjectCML模板可直接使用的响应数据，是连接视图层的枢纽
methodsObject处理业务逻辑与交互逻辑的方法
watchObject侦听属性，监听数据的变化，触发相应操作
computedObjectCML模板可直接使用的计算属性数据,也是连接视图层的枢纽
beforeCreateFunction例初始化之后，数据和方法挂在到实例之前 一个页面只会返回一次
createdFunction数据及方法挂载完成
beforeMountFunction开始挂载已经编译完成的cml到对应的节点时
mountedFunctioncml模板编译完成,且渲染到dom中完成
beforeDestroyFunction实例销毁之前
destroyedFunction实例销毁后

组件间的通信

组件间的通信方式有以下几种：

父组件 -> 子组件： props传递

代码示例

  1. <!-- index.cml -->
  2. <template>
  3. <view >
  4.   <component-tag-name parent-prop="{{parent}}">
  5.   </component-tag-name>
  6. </view>
  8. </template>
  10. <script>
  11. class Index   {
  12.   data = {
  13.     parent:{msg:'this is parent message'}
  14.   }
  15. }
  17. export default new Index();
  18. </script>
  1. <!-- component-tag-name.cml -->
  2. <template>
  3.   <view>
  4.     <view>{{parentProp.msg}}</view>
  5.   </view>
  6. </template>
  8. <script>
  10. class ComponentTagName {
  11.   props = {
  12.     parentProp:{
  13.       type:Object,
  14.       default:{}
  15.     }
  16.   }
  17. }
  19. export default new ComponentTagName();
  20. </script>

子组件 -> 父组件：事件通讯 参考

代码示例

  1. <!-- index.cml -->
  2. <template>
  3. <view >
  4.   <component-tag-name  c-bind:parentevent="handleParentEvent">
  5.   </component-tag-name>
  6. </view>
  7. </template>
  8. <script>
  10. class Index   {
  11.   methods = {
  12.     handleParentEvent(...args){
  13.       console.log(...args)
  14.     }
  15.   }
  16. }
  17. export default new Index();
  18. </script>
  1. <!-- component-tag-name.cml -->
  2. <template>
  3.   <view>
  4.     <view c-bind:tap="handleClick"></view>
  5.   </view>
  6. </template>
  7. <script>
  8. class ComponentTagName {
  9.   methods = {
  10.     handleClick(){
  11.       this.$emit('parentevent',{
  12.         value:'this is from child'
  13.       })
  14.     }
  15.   }
  16. }
  17. export default new ComponentTagName();
  18. </script>