regularjs / regular

regularjs: a living template engine that helps us to create data-driven component.
http://regularjs.github.io/
MIT License
1.06k stars 149 forks source link

组件怎么传事件? #32

Closed Dreampie closed 9 years ago

Dreampie commented 9 years ago
<div class="ui large icon input {searchState.loading?'loading':''} {searchState.error?'error':''}">
  <input r-model="month" type="text" placeholder="Search month..." readonly="readonly">
  <i class="search icon" on-click="{this.search(month)}"></i>
</div>

<app-datepicker searchState={searchDaily} search={@(this.search)}></app-datepicker>

组件里面有个onclick时间,怎么传递?

leeluolee commented 9 years ago

你r-model可以去掉了 没有用了, 既然你手动进行了 赋值。 这些问题, 要不你邮件我吧,bug和建议放在issue里

一种方式 <app-datepicker month={outerMonth}></app-datepicker> 内部的month和外部的outerMonth双向绑定了。

另一种方式, 也是推荐的方式 。 datepicker里 抛出事件

on-click={this.$emit('select', month)}

在外层

<app-datepicker on-select={this.select($event)}></app-datepicker>

组件事件和Dom的注册是类似的, 表现也类似

Dreampie commented 9 years ago

on-click={this.$emit('select', first,second)}

on-select={this.job($event)}

job方法只能得到一个参数?

leeluolee commented 9 years ago

嗯,主要是为了和dom事件统一, 内部其实是一个流程。

你可以传一个对象

this.$emit('select', {first: first, second:secod
})

不过建议你表达式复杂的花, 另起一个函数做

on-click={this.seletct()}

select: function(){
   this.$emit('select', {first:fist, second: second})
}
Dreampie commented 9 years ago

我看你的说明时可以传多个参数的,

component.$emit(eventName [, args...])
leeluolee commented 9 years ago

可以传多个, 但是模板中只能声明一个。 因为emit出来的事件 不是只能在模板中绑定的.

比如 component.$on('select', function(arg1, arg2, arg3){})

如果非要传入多个参数,你可以这样, 比如你外层组件是component1, 它的模板

on-select=‘select1’

那内层组件的事件会代理到外层的select1事件。这样你再外层的init或config里监听


init: function(){
   this.$on('select1', function(arg1, arg2){

   })
}

传表达式和字符串, 事件处理不一样, 可以参考这一个章节http://regularjs.github.io/guide/zh/events/component.html