微信小程序template嵌套template,传递数据

在微信小程序中,使用template模板嵌套传递数据的方法 : <template data="{ { }}"> </template>

注: 在你写template模板嵌套的时候,最好 从里层向外层 一层层的写,但是绑定数据的时候(也就是传递数据),从最外层往里层 一层层绑定数据; 

例子
最外层的template: 

<view class="movies-template">
    <!-- 数据绑定,这里的movies是获取到一个数组,写模板从里层向外写,绑定数据,从外向里 -->
    <template is="movieListTemplate" data="{
   
   {movies}}" />
</view>

 向里一层:

<template name="movieListTemplate">
<view class='movies-container'>
	<!-- movies是不能随便取名的,这个是数据数组的名字,后边这个movie表示遍历数组中的每一项,随便取名的,但是必须跟下边绑定的名字一致 -->
	<block wx:for="{
   
   {movies}}" wx:for-item="movie" wx:key="">
		<!-- ... 表示把每一项movie数据展开,直接写对象的属性,就可以拿到值,熟悉ES6的都会懂 -->
		<template is="movieTemplate" data="{
   
   {...movie}}" />
	</block>
</view>
</template>

最里层: 

<template name="movieTemplate">
<view class='movie-container'>
	<!-- 这里直接写数据中每个对象的属性,就可以拿到值了 -->
	<image class='movie-img' src='{
   
   {coverageUrl}}'></image>
	<text class='movie-title'>{
   
   {title}}</text>
</view> 
</template>

注: ... 不懂得,可以看一下ES6!

传多个参数

 <template is="starsTemplate" data="{
   
   {stars:stars,score:average}}" />

 

Guess you like

Origin blog.csdn.net/qq_31432773/article/details/119949987