vue v-for slot 传参的问题

原因

在使用瀑布流组件时，不想把业务相关的功能放到瀑布流组件中，瀑布流组件通过slot来提供程序的隔离，界面对象关系如下图：

瀑布流组件waterfall与itemView组件都是主窗体的组件，主窗体要把List传给瀑布流组件进行排列，以便达到界面布局的效果，但是排列好的数据又需要通过itemView来展示，那waterfall组件如何把List_news.item传给itemView呢？

解决

参考：Slots — Vue.js
代码如下：

主窗体代码：

      <waterfall ref="Waterfall">
        <template #default="slotProps">
          <viewItem :itemValue="slotProps.passItem" />
        </template>
      </biaofun-waterfall>
     
     ......
     components: { waterfall, itemView },
	 onLoad() {
	     // this.list 是从后台获取的数据
	     this.$refs.Waterfall.add(this.list)
	 }
     

waterfall.vue代码，要注意的是，list_new是经过数据处理的数据

        <view
          v-for="(item, index) in list_new"
          :key="index"
          class="item"
        >
          <slot :passItem="item"/>
        </view>
......
data() {
  return {
    new_list: []
  }
},
methods: {
  add(list) {
    // 经过特殊处理，产生list_new的数据
  }
}

itemView.vue代码

  <view>
     检查传入的值：{{ JSON.stringify(itemValue) }}
  </view>

  ------
  
  props: {
    itemValue: {
      type: Object,
      default: null
    }
  }

上面的代码中，主窗体的#default="slotProps"语法很重要，参数的passItem要匹配。

另外注意一咪，小程序的写法与H5的写法不同，请查看微信小程序或支付宝小程序的文档。