Method

开始

让我们接着组件 生命周期 的教程来讲解，还是定时器的例子：

Ale("timer", {
    template: function(){
        return "<span>Now Time: </span>" + this.time
    },
    data: {
        time: new Date().toLocaleTimeString()
    },
    life: {
        mounting: function(){
            /* 这里需要使用箭头函数，因为不会绑定 this */
            this.timer = setInterval(() => {
                this.data.time = new Date().toLocaleTimeString();
            }, 1000);
        },
        unmounting: function(){
            clearInterval(this.timer);
        }
    }
})

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

不知道你有没有注意到，我们的定时器直接添加在 this 上：

/* 注意这里，直接绑定到 Ale组件对象上(this) */
this.timer = setInterval(() => {
    this.data.time = new Date().toLocaleTimeString();
}, 1000);

可是，如果我们不小心，添加的函数与 Ale组件对象 里的内置函数重名了，那么将会有一些未知 BUG 出现。

这时，我们推荐你将函数添加到 Ale组件对象 里的内置属性 methods 上！

让我们修改一下代码：

Ale("timer", {
    template: function(){
        return "<span>Now Time: </span>" + this.time
    },
    data: {
        time: new Date().toLocaleTimeString()
    },
    life: {
        mounting: function(){
            /* 注意这里，绑定methods上 */
            this.methods.timer = setInterval(() => {
                this.data.time = new Date().toLocaleTimeString();
            }, 1000);
        },
        unmounting: function(){
            clearInterval(this.methods.timer);
        }
    }
})

实例是可以正常执行的。

同时，你也可以在组件定义时设置 methods：

Ale("test", {
    template: "test",
    methods: {
        /* 定义一个名为 testFn 的函数 */
        testFn: function(){
            alert("test!")
        }
    },
    life: {
        mounting: function(){
            /* 动态调用它 */
            this.methods.testFn();
        }
    }
})

高级

同 data 属性一样，methods 属性也会自动绑定到组件的全部元素及子元素上，通过 this.methods 即可访问：

template: "<span onclick='this.methods.testFn()'>Click me!</span>"

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