Ale.js

Composite component

Start

Ale allows you to bind any component with the imports property, and the new component will become a composite component:

1
2
3
4
5
6
7
8
9
10
/* Define a component called test-1 */
Ale("test-1", {
template: "Hello"
})

/* Define a component named test and then import test-1 */
Ale("test", {
imports: ["test-1"], /* Need to be an array here */
template: "World"
})

Once complete, the test component becomes a composite component.

So now if we render the test component, it will only output World instead of the HelloWorld we need. At this point we can add the test-1 component using the custom tag in the template properties of the test component:

1
2
3
4
Ale("test", {
imports: ["test-1"],
template: "<test-1/>World" /* Note that here we render the test-1 component using the <test-1/> format. */
})

Among them, we use the <test-1/> format to render the test-1 component, then it should be noted that the custom label can only be used for this format, even a space can not be added!

Now let’s render this component:

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

Already working, right? In fact, you can not only include a single component, but also include a composite component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Define a component called test-1 */
Ale("test-1", {
template: "Hello"
})

/* Define a component called test-2 */
Ale("test-2", {
imports: ["test-1"],
template: "<test-1/> "
})

/* Define a component named test and then import test-2 */
Ale("test", {
imports: ["test-2"],
template: "<test-2/>World"
})

Advanced

Composite components are compared to normal (single) components:

  • The entire composite component shares a data. That is, there is no hierarchical relationship between composite components, and any component can manipulate data from all other components. (In addition, according to the order in which imports are imported, data of the same name will overwrite the previous data of the same name)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* Define a component called test-1 */
Ale("test-1", {
template: function(){
return this.data.h; /* Here access to the data of the test component */
}
})

/* Define a component called test-2 */
Ale("test-2", {
imports: ["test-1"],
template: "<test-1/> "
})

/* Define a component named test and then import test-2 */
Ale("test", {
imports: ["test-2"],
template: "<test-2/>World",
data: {
h: "Hello"
}
})

  • The entire composite component shares a single method.

  • The entire composite component shares a proxy.

  • The entire composite component shares a life.

Including local components

If you want to include a partial component, simply reference the Ale local component generation object in the imports property.

At the same time you need to add a name attribute to the local component, otherwise Ale has no way to distinguish the name of the local component [default is 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
/* Define a local component called test-1 */
var test1 = Ale({
template: function(){
return this.data.h; /* Here access to the data of the test component */
},
name: "test1"
})

/* Define a component called test-2 */
var test2 = Ale({
imports: [test1],
template: "<test1/> ",
name: "test2"
})

/* Define a component named test and then import test-2 */
var test = Ale({
imports: [test2],
template: "<test2/>World",
data: {
h: "Hello"
}
})
test.render({
el: "#app"
})


Found some errors? Edit on Github!