我的书签
添加书签
移除书签复合组件
开始
Ale 允许你将任意的组件使用 imports 属性绑定到一起，绑定后的新组件将会成为一个 复合组件：
- /* 定义一个名为test-1的组件 */
Ale("test-1", {
template: "Hello"
})
/* 定义一个名为test的组件，然后引入test-1 */
Ale("test", {
imports: ["test-1"], /* 这里需要为一个数组 */
template: "World"
})
完成之后，test组件就变成了一个复合组件。
那么现在如果我们渲染test组件，那么它只会输出World，而不是我们需要的HelloWorld。这时我们可以在test组件的模板属性里使用自定义标签添加test-1组件：
- Ale("test", {
imports: ["test-1"],
template: "<test-1/>World" /* 注意这里，我们使用<test-1/>这种格式渲染了test-1组件 */
})
其中，我们使用<test-1/>这种格式渲染了test-1组件，那么需要注意的是，自定义标签只能为这种格式，一个空格都不能多加！
现在让我们来渲染一下这个组件：
- Ale.render("test", {
el: "#app"
})
已经正常工作了，对吧？其实你不只可以引入单组件，还可以引入复合组件：
- /* 定义一个名为test-1的组件 */
Ale("test-1", {
template: "Hello"
})
/* 定义一个名为test-2的组件 */
Ale("test-2", {
imports: ["test-1"],
template: "<test-1/> "
})
/* 定义一个名为test的组件，然后引入test-2 */
Ale("test", {
imports: ["test-2"],
template: "<test-2/>World"
})
高级
复合组件相比普通（单）组件：
- 整个复合组件共用一个
data。也就是说，复合组件之间没有层级关系，任何组件都可以操作另外的所有组件里的数据。（另外，按imports导入的先后顺序，同名的数据将会覆盖之前的同名数据）
- /* 定义一个名为test-1的组件 */
Ale("test-1", {
template: function(){
return this.h; /* 这里访问了test组件的数据 */
}
})
/* 定义一个名为test-2的组件 */
Ale("test-2", {
imports: ["test-1"],
template: "<test-1/> "
})
/* 定义一个名为test的组件，然后引入test-2 */
Ale("test", {
imports: ["test-2"],
template: "<test-2/>World",
data: {
h: "Hello"
}
})
