小程序的模板`template`的使用以及传参

前沿

在我们开发小程序的时候肯定会遇到相同模版的页面，比如说公共弹窗，这个时候就需要公共的组件来承载这个页面，就可以用template模版来开发公共模版。接下来我们就看看如何创建一个template模版，以及模板之间的传参。

---

template是模版展示，没有自己的js逻辑，是需要在引用页面写js逻辑的。比较适合展示类的公共模板，若是想要与vue公共组件那样还是需要component组件。

---

step 一，在你的项目中新建一个template文件夹来管理你项目中的模版。

• 首先先建一个common.wxml页面来定义模板内容。

common.wxml

//name属性，用来区分每一个模版，这样不会冲突。
<template name="commonWindow">
    <view class="name">
       <text class="ename">{{userPhone}}</text>
       <text class="cname">{{userName}}</text>
    </view>
</template> 

common.wxss

样式文件呢，就是在需要引入模板的页面按照正确路径引入该文件就好了

step 二，使用方法，在引用页面通过import标签的src属性引入就阔以了。

假设这是引用页面

<import src="../template/common.wxml">
<view class="name">
//通过template标签的is属性来决定使用那个标签
//通过template标签的data属性往里边传值
//往template里边传值时在参数前面写...item，是用来展开对象的

       <template is="commonWindow" data="{{...userPhone}}"></template>
//如果要是传多个用逗号隔开就行了。
<template is="commonWindow" data="{{userPhone,userName}}"></template>
传入方法这样：
<template is="commonWindow" data="{{templateMethods}}"></template>
    </view>

接下来在看看引用页面的逻辑

Page({
   data:{
        userPhone:"1234567",
         userName:"张三啊",
        templateMethods:[{"click":"getUser"}，{"tap":"getUserInfo"}],    //多个方法
     },
getUser(){
    在这里写逻辑就好了

  }




  })