组件 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>
  7. </template>
  8. <script>
  9. class Index {
  10. data = {
  11. parent:{msg:'this is parent message'}
  12. }
  13. }
  14. export default new Index();
  15. </script>
  1. <!-- component-tag-name.cml -->
  2. <template>
  3. <view>
  4. <view>{{parentProp.msg}}</view>
  5. </view>
  6. </template>
  7. <script>
  8. class ComponentTagName {
  9. props = {
  10. parentProp:{
  11. type:Object,
  12. default:{}
  13. }
  14. }
  15. }
  16. export default new ComponentTagName();
  17. </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>
  9. class Index {
  10. methods = {
  11. handleParentEvent(...args){
  12. console.log(...args)
  13. }
  14. }
  15. }
  16. export default new Index();
  17. </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>