微信小程序开发宝典：4模板和引用

微信小程序开发宝典：4模板和引用

参考文档:微信开放文档

1、模板申明与调用：可以使用template标签对一个模板进行申明并使用name属性给模板起一个名字，需要引用模板是也是使用template标签，并使用它的is属性表面引用的是那个模板

例子:

wxml:

<template name="test1">
    <view>组件1</view>
    <view>组件2</view>
</template>
<template is="test1" />

结果：

2、组件传参：如果我们需要传参进入组件，则可以使用data属性往组件里面传值，并且到了组件里面也不需要再写对象名称

例子：

wxml:

<template name="test1">
    <view>{{name}}</view>
    <view>{{age}}</view>
</template>
<template is="test1" data="{{...obj}}" />

js:

data: {
        obj: {
            name: "Mr.Lin",
            age: 24
        }
    },

结果：

3、模板的外部引用：使用import先引用外部文件，再使用template标签中的is属性调用需要的模板

例子：我在例子中是先建立一个叫temp的小程序页面，把组件放进去如何使用主页面进行调用

temp.wxml:

<template name="test2">
    <view>{{name}}</view>
    <view>{{age}}</view>
</template>

wxml:

<import src='../temp/temp.wxml' />
<template is="test2" data="{{...obj}}"></template>

js:

data: {
        obj: {
            name: "Mr.Lin",
            age: 24
        }
    },

结果：

感谢大家看到这里，如果觉得我写得好的话麻烦大家给我一个👍，谢谢大家拉~(^ _ ^)∠※