uniapp组件封装

父子组件通信

类似于列表多个页面都会用到，我们就封装起来

 

 

先创建个components文件夹，在文件夹中创建一个vue文件，我这里叫 lists.vue

<template>
  <view class="index_list" >
    <view
      class="list"
      v-for="(item, index) in floorDataList"
      :key="index"
    >
      <view class="list_left">
        <view class="jf">
          {{ item.roomNm }}
        </view>
        <view class="sbei">
          <view class="sbei_top">
            <image
              src="../../static/images/index_image/设备.png"
              mode=""
            ></image>
            <text>设备</text>
            <text class="sbei_number">
              {{ item.onlineDeviceVO.count }}
            </text>
          </view>
          <view class="sbei_bottom">
            <image
              src="../../static/images/index_image/设备.png"
              mode=""
            ></image>
            <text>设备</text>
            <text class="sbei_number">
              {{ item.alarmDeviceVO.count }}
            </text>
          </view>
        </view>
      </view>
      <view class="list_right">
        <image src="../../static/images/index.png" mode=""></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    floorDataList: {
      roomNm: {
        type: String,
        default: "", 
      },
      onlineDeviceVO: {
        type: Number,
        default: "", 
      },
      alarmDeviceVO: {
        type: Number,
        default: "", 
      },
    },
  },
  data() {
    return {};
  },

  methods: { },
};
</script>

<style lang="scss" scoped>
@import "../../common/index/lists.scss";
</style>

然后在父组件中引入

import lists from "../../components/lists/lists.vue"

 components: {
     lists,
  },//引入

在view中（floorDataList是获取的数据，在父组件中获取）

  <lists :floorDataList="floorDataList"></lists>