一、發(fā)現(xiàn)問題

有時(shí)候在使用template模板時(shí)又使用了列表渲染，然后又想把index值和數(shù)據(jù)一同傳入data

<!-- test/test-template/test-template.wxml -->
<template name="stdInfo">
  <view>
    <!-- 這里用到了index -->
    <text>{{index + 1}} </text>
    <text>{{title}}</text>
    <text> {{name}}</text>
  </view>
</template>

<!--pages/test/test.wxml-->
<import src="./test-template/test-template.wxml" />
<view>
  <template is="stdInfo" wx:for="{{stdInfo}}" data="{{...stdInfo[index]}}"></template>
</view>

// pages/test/test.js
Page({
  data: {
    stdInfo: [
      {
        name: "lostexin",
        age: 21,
        gender: "m",
        title: "老子是魔法少女"
      },
      {
        name: "afei",
        age: 21,
        gender: "m",
        title: "邪王真眼"
      }
    ]
  }
})

想要index從外部傳入，而不想寫在js文件的data中（即從后端獲取過來，填充到data里）

二、解決問題

首先說明一下擴(kuò)展運(yùn)算符，它是ES6的語法，它的作用是“將一個(gè)數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列”

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

注： ES2018將這個(gè)運(yùn)算符引入了對象，所以也可以對對象這么整，參考：阮一峰老師《ES6入門》數(shù)組擴(kuò)展和對象擴(kuò)展章節(jié)

改寫代碼，如下

<!--pages/test/test.wxml-->
<import src="./test-template/test-template.wxml" />
<view>
  // 注意最后兩個(gè)花括號和前面的花括號要隔開，不然會(huì)報(bào)錯(cuò)
  <template is="stdInfo" wx:for="{{stdInfo}}" data="{{...stdInfo[index], ...{index: index, name: item.name} }}"></template>
</view>

最后輸出結(jié)果