组件基础

写在前面

在介绍章节中，你已经学习了一些基础的定义和渲染组件的函数。这些基础将不会在本章中出现，如果你还没有学习过部分内容，请访问 介绍 页面。

开始

在介绍页面，我们已经了解了关于 template 属性的一些知识：

//定义一个名为 com1 的组件
Ale("com1", {
    template: "HelloWorld"
});

其实，template 属性还支持接收一个函数，但是具体的模板需要使用return返回：

//定义一个名为 com1 的组件
Ale("com1", {
    template: function(){
        return "HelloWorld";
    }
});

//当然，你也可以使用 ES6 语法来定义模板
Ale("com1", {
    template(){
        return "HelloWorld";
    }
});

之后我们需要去渲染这个组件：

Ale.render("com1", {
    el: "#app" /* 目标元素选择器 */
})

那么，将 template 属性设置为函数有什么好处呢？其实，它可以自动绑定一个叫 data 的属性。

例如我们在 data 属性里定义一个名为name的值，然后渲染它：

Ale("com1", {
    template: function(){
        return "Hello " + this.name;
    },
    data: {
        name: "World"
    }
});

/* 切记一定不可使用 ES6 的箭头函数，因为箭头函数不会绑定 this
Ale("com1", {
    template: () => {
        return "Hello " + this.name; //错误！
    },
    data: {
        name: "World"
    }
});
*/

高级操作

你也可以在组件被渲染时动态设置 data。其中，重名的属性将会被重新赋值：

Ale.render("com1", {
    el: "#app",
    data: {
        name: "Ale.js" /* 会被重新赋值为 Ale.js */
    }
})

当然，同一个组件也可以被渲染多次：

Ale.render("com1", {
    el: "#app"
})

Ale.render("com1", {
    el: "#app2"
})

Ale.render("com1", {
    el: "#app3",
    data: {
        name: "Ale.js" /* 也可以拥有不同的属性 */
    }
})

原文: https://cn.alejs.org/2018/12/01/ComponentFoundation