【建议】template里支持事件
发布于 6 年前 作者 fanglong 19769 次浏览 来自 问答

几乎稍微有点复杂的组件就会有自己的事件处理。

目前现在想在小程序里开发复杂点的组件应用,模板和样式需要自己import,数据通过data传入,这都可以自己的解决。但如果这个template里有个button或者input的话该怎么办?

现在想自己处理的话就只能写东西编译了,这对有数十页的应用来说是个灾难。

10 回复

// avatar.wxml

<template name=“avatar”>

    <view bindtap=“show”>Avatar</view>

</template>

// avatar.js

export default {

    show () {

        alert(‘This is avatar’)

    }

}

// indexPage.js

import avatar from ‘./avatar’

Page({

    onLoad () {

        Object.assign(this, avatar);

        // or

        this.show = avatar.show

    }

})

// indexPage.wxml

<import src="./avatar.wxml" />

<template is=“avatar” />

你onLoad的时候再赋值试试

可以在js模块里面,给page增加事件响应的方法么?

可以简单给个示例么?

components定义如下:

<text class="quit" bindtap="quit">退出</text>
import * as wechat from '../../libs/wechat'
 
export default {
    data: {
        userName: '',
    },
    quit(e) {
        console.log('header-title-quit');
        //清空个人信息及token,
        wechat.removeSNToken().then(() => {
            return wechat.removeSNUserInfo()
        }).then(() => {
            wx.redirectTo({ url: '../login/login' })
        });
    },
}

我使用deep-asign.js 将对象合并

let p = deepAssign(storeSelect, headerTitle, errorMsg);
console.log('p', p);
// 创建页面实例对象
Page(p)

输出:

然而quit事件仍然没激活,请问知道原因么?@侯耀

@侯耀  是我的锅,蛤,页面上有一个绝对定位的浮层  

你可以把模板的方法单独放在一个js里,如果哪个页面要用这些方法,就import到那个Page里.

用Object.assign继承。

@Limichange 这是什么原理呢,文档里没有找到

求老铁解答

不行

onLoad() {
        this.quit = headerTitle.quit;
        console.log('thisPage', this);
}

如果在page里面写方法,那模版引入到哪个page,就要把方法复制到哪个page里面?

这个要怎么解决?

回到顶部