小程序学习笔记（四）template模版

最新推荐文章于 2023-04-09 20:55:02 发布

原创最新推荐文章于 2023-04-09 20:55:02 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种在前端开发中通过定义和使用模板来复用代码的方法，详细讲解了如何创建模板并将其应用到不同场景中，从而提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概念

将相同的代码块抽离出来，在模板中定义代码片段，然后在不同的地方调用。

模版的定义与使用

1、定义模板

在内定义代码片段，template中的 name 属性接收一个字符串作为该模板的名字。如：

<template name="msgItem">              //  msgItem:该模版的名字
  <view>
    <text>{{title}}</text>
    ...
  </view>
</template>

2.使用模板

在其他所需要的文件最上方引入使用<import />的src属性将相关模板引入

<import src="  模板所在的路径,可以是相对路径也可以是绝对路径 "/>

<template is="msgItem" data="{{...item}}" />     //  is：用以指定模版，接收模板名    data: 将数据传递给模版

tips:

1、在模版文件中，值需要wxml、wxss两个文件即可，在template中js文件是不运行的

2、在组件中给模版传递数据事，使用 <template is="msgItem" data="{{...item}}" /> 将数据进行展开，那在模版中获取数据就直接写item下的属性名就行
如果是使用 <template is="msgItem" data="{{item}}" />，那在模版中获取数据就需要使用 item.属性名来获取数据

3、templete模版作为一个占位符，是没有渲染在wxml中的，所以给templete添加事件，不能直接加给template本身，可以在外面用一个元素包裹起来，将时间添加给父级元素