Ale.js

复合组件

开始

Ale 允许你将任意的组件使用 imports 属性绑定到一起,绑定后的新组件将会成为一个 复合组件

1
2
3
4
5
6
7
8
9
10
/* 定义一个名为test-1的组件 */
Ale("test-1", {
template: "Hello"
})

/* 定义一个名为test的组件,然后引入test-1 */
Ale("test", {
imports: ["test-1"], /* 这里需要为一个数组 */
template: "World"
})

完成之后,test组件就变成了一个复合组件。

那么现在如果我们渲染test组件,那么它只会输出World,而不是我们需要的HelloWorld。这时我们可以在test组件的模板属性里使用自定义标签添加test-1组件:

1
2
3
4
Ale("test", {
imports: ["test-1"],
template: "<test-1/>World" /* 注意这里,我们使用<test-1/>这种格式渲染了test-1组件 */
})

其中,我们使用<test-1/>这种格式渲染了test-1组件,那么需要注意的是,自定义标签只能为这种格式,一个空格都不能多加!

现在让我们来渲染一下这个组件:

1
2
3
Ale.render("test", {
el: "#app"
})

已经正常工作了,对吧?其实你不只可以引入单组件,还可以引入复合组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 定义一个名为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导入的先后顺序,同名的数据将会覆盖之前的同名数据)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 定义一个名为test-1的组件 */
Ale("test-1", {
template: function(){
return this.data.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"
}
})

  • 整个复合组件共用一个methods。

  • 整个复合组件共用一个proxy。

  • 整个复合组件共用一个life。

引入局部组件

如果你想引入局部组件,直接在 imports 属性里引用 Ale局部组件生成对象 即可。

同时你需要给局部组件增加一个 name 属性,否则 Ale 没有办法区分局部组件的名称【默认为unknown】:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 定义一个名为test-1的局部组件 */
var test1 = Ale({
template: function(){
return this.data.h; /* 这里访问了test组件的数据 */
},
name: "test1"
})

/* 定义一个名为test-2的组件 */
var test2 = Ale({
imports: [test1],
template: "<test1/> ",
name: "test2"
})

/* 定义一个名为test的组件,然后引入test-2 */
var test = Ale({
imports: [test2],
template: "<test2/>World",
data: {
h: "Hello"
}
})
test.render({
el: "#app"
})


找到了一些错误?在Github上编辑!