封装|封装 avm 组件经验分享封装avm组件经验分享

avm.js 是一个跨端开发框架，AVM（Application-View-Model）前端组件化开发模式基于标准Web Components组件化思想，提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具，完全兼容Web Components标准，同时兼容Vue和React语法糖编写代码，编译工具将Vue和React相关语法糖编译转换为avm.js代码。
有Vue和React 开发经验的很容易上手。
1. 组件的定义和引用： 1.1 使用stml定义一个组件 / 页面 stml组件兼容Vue单文件组件(SFC)规范，使用语义化的Html模板及对象化js风格定义组件或页面。stml最终被编译为JS组件 / 页面，渲染到不同终端。
定义组件：

// api-test.stml: .header{ height: 45px; }

1.2 组件引用：

// app-index.stml:.app { text-align: center; margin-top: 60px; }

2. 向子组件传值
向子组件传值采用 props 的方式，这里以一个示例来进行说明。
定义子组件，在 props 里面注册一个 title 属性：

// api-test.stml:

这里定义的title属性类型为String，属性类型包括 String、Number、Boolean、Array、Object、Function等。
2.1 在其它页面使用子组件时传递静态值：

// app-index.stml:

2.2 通过数据绑定传递动态值：

// app-index.stml:

传递静态值时只能传递字符串类型数据，通过数据绑定的方式则可以传递任意类型的数据。
3. 监听子组件事件** 监听子组件事件和监听普通事件类似，如：

// api-index.stml:

以上示例中监听了子组件的result事件，子组件里面通过fire方法来触发监听的事件：

// app-test.stml:

fire方法有两个参数，第一个参数为事件名称，第二个参数为要传递的自定义数据，在父组件监听方法里面通过e.detail获取传递的数据。

// api-index.stml:methods: { onGetResult(e){ console.log(e.detail.msg); } }

4.声网组件实例
了解了以上组件的规则和用法，就可以封装自己的组件了。下面看一个基于agoraRtc声网模块，实现1对1语音通话的组件实例：

.agorartc-call-voice_page { height: 100%; width: 100%; background-color: #fff; }.agorartc-call-voice_list { height: 64px; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; margin-bottom: 10px; }.agorartc-call-voice_userinfo { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; padding-left: 20px; }.agorartc-call-voice_callimg { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; flex-grow: 2; padding-right: 20px; }.agorartc-call-voice_connected { position: absolute; top: 0; left: 0; background-color: #fff; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; }.agorartc-call-voice_hangup { margin-top: 30px; }