小程序代码复用 - template
为了提高代码的复用率，小程序提供了多种代码复用的模式，其中最简单的就是模板template。本文介绍一下如何定义模板及使用。
template定义
<template name="easy">
<text class='red' data-name="{{name}}" bindtap="click">I'm Easy,{{greeting}}</text>
</template>
<template name="Davi">
<text>I'm Davi,nice to meet you</text>
</template>使用
data-name可以在事件中传递参数name给处理函数click
template使用
<import src="../../template/template.wxml" />
<view class="container">
<!-- 引用template模板，用is="easy"的方式，选择模板 -->
<template is="easy" data="{{...person}}" />
<template is="Davi" />
</view>数据及事件处理
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
person: {
greeting: "你好",
name: "tim"
}
},
//事件处理函数
click: function(e) {
console.log(e);
console.log(e.currentTarget.dataset.name);
}
})输出自定义参数
e.currentTarget.dataset.name
注意事项
- template并没有定义事件回调函数，需要在使用方定义（如果要有自定义的函数，可以使用小程序组件component）
参考
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读