如何包装AVM组件？（以声音网络组件为例）
浏览：489 次
（Application View Model）是第一个移动高性能跨端JavaScript框架，支持一次编写多端渲染。它提供了更原生的编程体验，通过简单的模型分离了app的用户界面、业务逻辑和数据模型，适合高度定制的app开发。
AVM前端组件化开发模式基于标准Web组件的组件化思想，提供了一个包括虚拟DOM和Runtime Js的编程框架，多终端统一编译工具完全兼容Web组件标准，并兼容Vue和React语法糖来编写代码。编译工具将Vue和React相关语法sugar编译成AVM。js代码。
具有Vue和React开发经验的开发人员可以轻松上手。
1.组件定义和引用（1）使用STML定义组件/页面
STML组件与Vue Single File Component（SFC）规范兼容，并使用语义HTML模板和对象化JS样式来定义组件或页面。STML最终被编译成JS组件/页面，并呈现给不同的终端。
定义组件：
//api-test.shtml：
<模板>
<脚本>
导出默认值{
name:'api测试'，
数据（）{
返回{
title:“您好APP”
}
}
}
.页眉{
高度：45px；
}
（2） 组件参考
//app-index.shtml：
<模板>
<脚本>
导入'./组件/api测试.stml'
导出默认值{
name:'app索引'，
数据：函数（）{
返回{
title:“您好APP”
}
}
}
2.props方法用于将值传递给子组件。这里用一个例子来说明。
定义子组件并在props中注册标题属性：
//api-test.shtml：
<模板>
<脚本>
导出默认值{
name:'api测试'，
道具：{
title:字符串
}
}
这里定义的标题属性类型是String，包括String、Number、Boolean、Array、Object、Function等。
（1） 当其他页面使用子组件时传递静态值：
//app-index.shtml：
<模板>
<视图>
<脚本>
导入'./组件/api测试.stml'
导出默认值{
name:'app索引'
}
（2） 通过数据绑定传输动态值：
//app-index.shtml：
<模板>
<视图>
<脚本>
导入'./组件/api测试.stml'
导出默认值{
name:'app索引'，
数据（）{
返回{
msg:'你好app！##39;
}
}
}
传递静态值时，只能传递字符串类型的数据，任何类型的数据都可以通过数据绑定传递。
3.倾听子组件事件。倾听子组件事件类似于倾听常见事件，例如：
//api-index.shtml：
<模板>
<视图>
<脚本>
导入'./组件/api测试.stml'
导出默认值{
name:'app索引'，
方法：{
获取结果（e）{
console.log（e.detail.msg）；
}
}
}
在上面的示例中，子组件的result事件被监听。子组件使用fire方法触发监听事件：
//app-test.shtml：
<模板>
<脚本>
导出默认值{
name:'api测试'，
方法：{
onclick（）{
let detail={msg:'Hi'｝；
这火灾（“结果”，详情）；
}
}
}
火灾方法有两个参数。第一个参数是事件名称，第二个参数是要传输的用户定义数据。要传输的数据通过父组件侦听方法中的e.detail获得。
//api-index.shtml：
方法：{
获取结果（e）{
控制台日志（e.detail.msg
