组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊。

你484傻,多一种选择不好吗?

其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空函数,是Component中的原型方法),也就是生命周期中的一种。然后在这该方法中,

给子类的data赋值,然后update(),这种方式野蛮好玩的。

老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。

        class Hello extends Omi.Component {
constructor(data) {
super(data);
} style() {
return `
h1 {
cursor: pointer;
}
`;
} handleClick(target, click) {
console.log(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);
} installed() { // dom已经插入到指定的dom容器中了
this.hello.data.name = 'Sorrow.X'; // 给Hello类的实例hello添加name属性
this.update(); // 实例hello更新一下dom
} render() {
return `
<div>
<Hello name="hello" />
</div>
`;
}
}; var app = new App();
Omi.render(app, 'body');

demo的疑问和疑问的说明:

疑问1:

demo中的install方法是什么鬼?

答: 不是鬼,是类原型上的一个方法,这个方法Component类也有,只不过是空函数,子类如果重写了这个方法,

那么等到dom插入到指定的dom中后,就可以执行该方法(后面会讲解omi的生命周期)。

疑问2:

<Hello name="hello" />中的name对应的hello又是啥啊?

答:

这个其实在组件那一篇文章就讲解过了,name="hello"中的hello其实是Hello构造函数的实例。看看怎么实现的

然后给了app这个实例对象

然后提取完孩子后,就回到Omi.render方法

之后调用install方法,如果子类没重写,那就调用Component自己的install空函数

是不是so easy. 我热,我竟然会说英文。

ps:

这个demo,就此结束了,作者应该用此demo想证明一下,在omi中组件通讯就是这么简单方便,当然上帝模式还没开启,一旦开启,真的要飞起了。

Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明的更多相关文章

  1. Omi框架学习之旅 - 之开篇扯蛋

    说实话, 我也不知道Omi是干啥的, 只因此框架是alloyTeam出的, dntzhang写的, 也有其他腾讯大神参与了, 还有一些其他贡献者, 以上我也不太清楚, 当我胡说八嘎. 因其写法有人说好 ...

  2. Omi框架学习之旅 - Hello World 及原理说明

    学什么东西都从hello world开始, 我也不知道为啥. 恩,先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. hello world - demo: class Hello e ...

  3. Omi框架学习之旅 - 组件 及原理说明

    hello world demo看完后其实基本的写法就会了. 但是omi中的组件是神马鬼?其实我也不知道组件是啥. 百度百科是这么说的: 是对数据和方法的简单封装.es6中,一个类其实也可以做到对方法 ...

  4. Omi框架学习之旅 - 组件通讯(group-data通讯) 及原理说明

    childrenData的方式可以批量传递数据给组件,但是有很多场景下data的来源不一定非要都从childrenData来, childrenData是个数组,会和组件的顺序一一对应,这就给不同传递 ...

  5. Omi框架学习之旅 - 插件机制之omi-touch 及原理说明

    这个插件也能做好多好多的事,比如上拉下拉加载数据,轮播,等一切和运动有关的特效. 具体看我的allowTouch这篇博客,掌握了其用法,在来看它是怎么和omi结合的.就会很简单. 当然使用起来也比较方 ...

  6. Omi框架学习之旅 - 插件机制之omi-router及原理说明

    先来看看官网的介绍吧:https://github.com/AlloyTeam/omi/tree/master/plugins/omi-router 其实我推荐直接看官网的介绍.我所写的,主要给个人做 ...

  7. Omi框架学习之旅 - 插件机制之omi-finger 及原理说明

    以前那篇我写的alloyfinger源码解读那篇帖子,就说过这是一个很好用的手势库,hammer能做的,他都能做到, 而且源码只有350来行代码,很容易看懂. 那么怎么把这么好的库作为omi库的一个插 ...

  8. Omi框架学习之旅 - 获取DOM节点 及原理说明

    虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获 ...

  9. Omi框架学习之旅 - 通过omi-id来实现组件通讯 及原理说明

    这个demo是通过omi-id来获取子类的实例,然后更改data属性,之后updata一下就好了. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello ...

随机推荐

  1. HDU5543(SummerTrainingDay03-O DP)

    Pick The Sticks Time Limit: 15000/10000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others ...

  2. 《.NET之美》之程序集

    一.什么是程序集(Assembly)? 经由编译器编译得到的,供CLR进一步编译执行的那个中间产物,在WINDOWS系统中,它一般表现为·dll或者是·exe的格式,但是要注意,它们跟普通意义上的WI ...

  3. 函数节流scroll,兼容火狐滚轮事件

    //函数节流 var wheelTimeout; var wheelFun = function (func) { if (wheelTimeout) { return; } func(); whee ...

  4. Git应用--04遇到冲突解决办法git stash(转载)

    git merge git pull时候遇到冲突解决办法git stash https://www.cnblogs.com/juandx/p/5362723.html 在使用git pull代码时,经 ...

  5. ListView实现下拉动态渲染数据

    欢迎讨论欢迎一起学习:微信jkxx123321 这是一篇关于LIstView实现动态数据渲染的文章![RN] 首先我们讲讲数据是如何来规划的 一般情况下我们有两种规划方案前提比如我们数据是100条+ ...

  6. springboot 学习之路 22 (读取自定义文件)

    springboot读取自定义的properties文件: package com.huhy.demo.properties; import lombok.Data; import org.sprin ...

  7. 第 16 章 C 预处理器和 C 库(string.h 库中的 memcpy() 和 memmove())

    /*----------------------------------------- mems.c -- 使用 memcpy() 和 memmove() ---------------------- ...

  8. IntelliJ IDEA src下新建包, 没有层级结构

    新建项目后再src先右键点击新建包  com.example  , 然后想在com.example 包中包含其他包, 当点击src新建包后,出现如图的情况 解决: 继续在src上右键新建package ...

  9. 阿里八八β阶段Scrum(5/5)

    今日进度 陈裕鹏: 简单信息抽取编码完成 叶文滔: 处理了信息抽取编码的一些BUG,修复了日程界面不会自动更新添加的日程的BUG,修改了原先测试用的TAG以及数据分析部分数据计算数值错误的问题 王国超 ...

  10. webpack打包去掉console.log打印与debugger调试

    如图,找到build/webpack.prod.conf.js 在 UglifyJsPlugin 插件下添加下列代码 drop_debugger: true, drop_console: true