js组件语法

官方文档：http://regularjs.github.io/reference/?api-zh

关键属性

• name
• template

关键方法

var Component = Regular.extend({
  name: 'testComponent',
  template: 
    "<div><h2 on-click={this.changeTitle(title + '1')}>{title}</h2>\
    <div>{content | filter:3}</div></div>",

  config: function(data) {
    _.extend(data, {
      a: 1,
      b: 2,
      content: 3
    });
    this.supr(data);
  },
});

Component.filter('filterA', function(value, num) {
  return value + num;
});

var instance = new Component({
  data: {
    a: 2,
    b: 3
  }
});
instance.$inject('#app');
setTimeout(function() {
  instance.destroy();
}, 2000);

// <testComponent a=1 b=2 content=100 />

静态方法

• filter: 过滤器方法
• extend：创建一个继承于Component的子组件，参数对象的所有属性都会成为子组件的原型属性；

实例方法

• config：初始化数据

• destroy：销毁实例

• $update：强制更新view，如果值变了，但是页面显示没变，需要手动调用$update()；

• $on/$emit：数据传递的时候使用，下面介绍；

组件之间的数据传递

父子组件：

var Component = Regular.extend({
    template: 
        "<div>
            <testComponent a={a} on-updateParentB={b = $event} />
            <testComponent a={a} on-updateParentB={this.updateB($event)} />
        </div>",
    config: function(data) {
        data.a = 1;
        data.b = 2;
        this.supr(data);
    },
    updateB: function(value) {
        this.data.b = value;
    }
});

var testComponent = Regular.extend({
    template: 
        "<button on-click={this.onBtnClick()}>change value</button>",
    config: function(data) {
        console.log('value a is: ', data.a);
        this.supr(data);
    },
    onBtnClick: function() {
        this.$emit('updateParentB', 100);
    }
});

子组件之间：

// template
<div>
    <testComponent1 on-updateName={this.updateName($event)} />
    <testComponent2 ref="component2" />
</div>

// js
var Component = Regular.extend({
    config: function(data) {
        this.supr(data);
    },
    updateName: function(value) {
        this.$refs.component2.updateSomeValue(value);
    }
});