组件通信

父组件向子组件通信

子组件并不能获取父组件实例，当父组件向子组件通信时，应该使用属性来传递数据。

var SubComponent = Intact.extend({
    template: '<div>{self.get("data")}</div>'
});

var SubComponent = self.SubComponent;
<SubComponent data="hello" />

Intact.extend({
    template: template,
    _init: function() {
        this.SubComponent = SubComponent;
    }
});

动态prop

除了传递字面量数据，你还可以通过{}语法传递动态数据

var SubComponent = self.SubComponent;
<div>
    <input v-model="message" />
    <SubComponent data={self.get('message')} />
</div>

Intact.extend({
    template: template,
    defaults: function() {
        return {message: 'hello'};
    },
    _init: function() {
        this.SubComponent = SubComponent;
    }
});

子组件向父组件通信

子组件向父组件通信，则是通过事件来传递数据。

以下例子仅仅为了演示如何通过自定义事件向父组件通信。大部分实际应用， 无需手动触发事件，使用默认事件即可达到目的。

var SubComponent = Intact.extend({
    template: '<input \
        ev-input={self.changeValue} \
        value={self.get("value")}\
    />',
    changeValue: function(e) {
        var value = e.target.value;
        this.set('value', value); 
        // 手动触发事件，传入数据value
        this.trigger('change', value);
    }
});

var SubComponent = self.SubComponent;
<div>
    <SubComponent ev-change={self.set.bind(self, 'message')} />
    接收到子组件的数据：{self.get('message')}
</div>

Intact.extend({
    template: template,
    _init: function() {
        this.SubComponent = SubComponent;
    }
});

Intact组件的属性和事件是属于组件实例的，你不能将组件当做元素DOM使用， 例如：如果组件没有暴露click事件，你给它绑定click事件是无效的。

// 以下click事件和class属性都无效，因为SubComponent并没有处理它们
<SubComponent ev-click={function() {}} class="test" />

非父子组件通信

当两个非父子组件要进行通信时，需要借助它们共同的父组件来代理通信。

我们将上面定义的SubComponent下面定义的Component当做兄弟节点渲染，当它们需要通信时， 可以如下这么做：

var Component = Intact.extend({
    template: '<div>来自SubComponent的数据：{self.get("data")}</div>' 
});

var SubComponent = self.SubComponent;
var Component = self.Component;
<div>
    <SubComponent ev-change={self.set.bind(self, 'message')} />
    <Component data={self.get('message')} />
</div>

Intact.extend({
    template: template,
    _init: function() {
        this.SubComponent = SubComponent;
        this.Component = Component;
    }
});