如何包装AVM组件？（以声音网络组件为例）

（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：

<模板>

｛this.data.title｝

<脚本>

导出默认值{

name:'api测试'，

数据（）{

返回{

title:“您好APP”

}

}

}

.页眉{

高度：45px；

}

（2） 组件参考

//app-index.shtml：

<模板>

<；/api测试>

<脚本>

导入'./组件/api测试.stml'

导出默认值{

name:'app索引'，

数据：函数（）{

返回{

title:“您好APP”

}

}

}

2.props方法用于将值传递给子组件。这里用一个例子来说明。

定义子组件并在props中注册标题属性：

//api-test.shtml：

<模板>

｛title｝

<脚本>

导出默认值{

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