Omi教程-组件通讯
来源:互联网 发布:苹果电池修复软件 编辑:程序博客网 时间:2024/05/27 10:43
组件通讯
Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯:
- 通过在组件上声明 data-* 传递给子节点
- 通过在组件上声明 data 传递给子节点
- 父容器设置 childrenData 自动传递给子节点
- 完全面向对象,可以非常容易地拿到对象的实例,之后可以设置实例属性和调用实例的方法
所以通讯变得畅通无阻,下面一一来举例说明。
data-*通讯
class Hello extends Omi.Component { constructor(data) { super(data); } style () { return ` h1{ cursor:pointer; } `; } handleClick(target, evt){ alert(target.innerHTML); } render() { return ` <div> <h1 onclick="handleClick(this, event)">Hello ,{{name}}!</h1> </div> `; }}Omi.makeHTML('Hello', Hello);class App extends Omi.Component { constructor(data) { super(data); } render() { return ` <div> <Hello data-name="Omi" /> </div> `; }}Omi.render(new App(),"#container");
一般data-用来传递值类型,如string、number。值得注意的是,通过data-接收到的数据类型都是string,需要自行转成number类型。
通常情况下,data-能满足我们的要求,但是遇到复杂的数据类型是没有办法通过大量data-去表达,所以可以通过data通讯,请往下看。
data通讯
如上面代码所示,通过 data-name="Omi"可以把name传递给子组件。下面的代码也可以达到同样的效果。
...class App extends Omi.Component { constructor(data) { super(data); this.helloData = { name : 'Omi' }; } render() { return ` <div> <Hello data="helloData" /> </div> `; }}Omi.render(new App(),"#container");
使用data声明,会去组件的instance(也就是this)下找对应的属性,this下可以挂载任意复杂的对象。所以这也就突破了data-*的局限性。
childrenData通讯
...class App extends Omi.Component { constructor(data) { super(data); this.childrenData = [{ name : 'Omi' }]; } render() { return ` <div> <Hello /> </div> `; }}Omi.render(new App(),"#container");
通用this.childrenData传递data给子组件,childrenData是一个数组类型,所以支持同时给多个组件传递data,与render里面的组件会一一对应上。
通过对象实例
...class App extends Omi.Component { constructor(data) { super(data); } installed(){ this.hello.data.name = "Omi"; this.update() } render() { return ` <div> <Hello name="hello" /> </div> `; }}Omi.render(new App(),"#container");
通过omi-id
...class App extends Omi.Component { constructor(data) { super(data); } installed(){ Omi.get("hello").data.name = "Omi"; this.update() } render() { return ` <div> <Hello omi-id="hello" /> </div> `; }}Omi.render(new App(),"#container");
通过在组件上声明omi-id,在程序任何地方拿到该对象的实例。这个可以算是跨任意组件通讯神器。
特别强调
- 通过childrenData或者data方式通讯都是一锤子买卖。后续变更只能通过组件实例下的data属性去更新组件
- 通过data-✼通讯也是一锤子买卖。后续变更只能通过组件实例下的data属性去更新组件。
- 关于data-✼通讯也可以不是一锤子买卖,但是要设置组件实例的dataFirst为false,这样的话data-✼就会覆盖组件实例的data对应的属性
关于上面的第三条也就是这样的逻辑伪代码:
if(this.dataFirst){ this.data = Object.assign({},data-✼ ,this.data);}else{ this.data = Object.assign({},this.data, data-✼);}
招募计划
- Omi的Github地址https://github.com/AlloyTeam/omi
- 如果想体验一下Omi框架,请点击Omi Playground
- 如果想使用Omi框架,请阅读 Omi使用文档
- 如果想一起开发完善Omi框架,有更好的解决方案或者思路,请阅读 从零一步步打造web组件化框架Omi
- 关于上面的两类文档,如果你想获得更佳的阅读体验,可以访问Docs Website
- 如果你懒得搭建项目脚手架,可以试试Scaffolding for Omi,npm安装omis便可
- 如果你有Omi相关的问题可以New issue
- 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)
0 0
- Omi教程-组件通讯
- Omi教程-组件通讯
- Omi教程-组件通讯
- Omi教程-组件通讯
- Omi教程-组件通讯
- Omi教程-组件通讯
- Omi教程-组件
- Omi教程-组件
- Omi教程-组件
- 2017年试试Web组件化框架Omi
- 2017年试试Web组件化框架Omi
- 2017年试试Web组件化框架Omi
- 2017年试试Web组件化框架Omi
- Omi原理-Hello Omi
- Omi原理-Hello Omi
- Omi原理-Hello Omi
- Android组件间通讯
- 统一通讯组件接口
- 历届试题 第39阶台阶
- 1008. Elevator (20)
- 为何java.lang.String被声明为final
- 杂七杂八
- Android开发:Handler的使用(二)
- Omi教程-组件通讯
- 【计算机网络】数据链路层理解
- vim的配置
- 1181
- (15.1.21.1)Camera--Picture Structure
- java知识总结(工作一年半差不多两年了,感觉是时候总结一下java,文章内容为本人观点)
- 蓝桥杯B组C语言-猜数字
- Problem on Group Trip UVALive - 7219
- linux task_struct