Vue父子组件传值深度监听-deep

1 Vue子组件封装

PS：子组件样式如下图所示，采用对象作为要传递的值。

子组件的封装代码如下所示，此处通过watch-deep执行对象值的监听，否则会出现在父组件中使用子组件时（尤其是v-for列表循环），数据更新，但是子组件视图中的内容不更新的情况出现。

<template>
  <div class="item-wrap">
    <!-- 序号 -->
    <span class="numid">{{ itemProperty.id }}</span>
    <!-- 报警人&处理状态&详情 -->
    <div class="generalInfo">
      {{ itemProperty.name }}
      <!-- 处理状态 -->
      <span class="status">{{
        itemProperty.status == '1' ? '已处理' : '未处理'
      }}</span>
      <!-- 详情 -->
      <span class="detail" @click="showDetail">详情</span>
    </div>
    <!-- 报警时间 -->
    <div class="datetime">报警时间：{{ itemProperty.warntime }}</div>
    <!-- 处理时间 -->
    <div class="endtime">处理时间：{{ itemProperty.endTime }}</div>
    <!-- 报警地点 -->
    <div class="place">报警地点：{{ itemProperty.warnAddress }}</div>
  </div>
</template>
<script>
export default {
  props: {
    outProperty: Object,
    require: true,
  },
  data() {
    return {
      itemProperty: {
        id: 1,
        idNumber: '',
        name: '张三',
        status: '已处理',
        warntime: '2020-01-18 18:30:00',
        endTime: '2020-01-18 18:35:26',
        wLon: '',
        wLat: '',
        warnAddress: 'XX省XX市XXX区XXX大道XXXX号',
      },
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$data.itemProperty = undefined
      this.$data.itemProperty = this.$props.outProperty
    })
  },
  computed: {
    onItemProperty() {
      return this.$data.itemProperty
    },
  },
  watch: {
    onItemProperty(value) {
      // this.$data.itemProperty = value
      // console.log(value)
    },
    //深度监听
    outProperty: {
      handler(newValue, oldValue) {
        this.$data.itemProperty = this.$props.outProperty
      },
      deep: true,
    },
  },
  methods: {
    //自定义事件
    showDetail() {
      // console.log(event)
      // console.log(this.$data.itemProperty)
      //向父组件发送消息
      this.$emit('showDetail', this.$data.itemProperty)
    },
  },
}
</script>
<style lang="less" scoped>
div {
  margin-top: 5px;
}
.item-wrap {
  position: relative;
  width: 300px;
  height: 90px;
  // position: absolute;
  // top: 50%;
  // left: 50%;
  font-size: 14px;
  color: #fff;
  // transform: translate(-50%, -50%);
  background-color: rgba(10, 42, 47, 0.8);
  /* 序号 */
  .numid {
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 40px;
    height: 20px;
    background-color: #ff5c26;
  }
  //报警人&处理状态&详情
  .generalInfo {
    margin-left: 50px;
    display: flex;
    text-align: left;
    color: #26ffff;
    // justify-content: space-around;
    //处理状态
    .status {
      flex: 3;
      text-align: right;
      color: #92b9cc;
    }
    //详情
    .detail {
      flex: 2;
      text-align: right;
      padding-right: 8px;
      display: inline-block;
      color: #fff;
    }
    .detail:hover {
      cursor: pointer;
      text-decoration: underline;
      text-decoration-color: orangered;
    }
  }
  //报警时间
  .datetime {
    margin-left: 40px;
    text-align: left;
    font-size: 12px;
    color: #92bacd;
  }
  // 处理时间
  .endtime {
    margin-left: 40px;
    text-align: left;
    font-size: 12px;
    color: #92bacd;
  }
  //报警地点
  .place {
    margin-left: 40px;
    text-align: left;
    font-size: 12px;
    color: #92bacd;
  }
}
</style>

2 父组件中使用子组件

Tips:此处就不贴布局样式代码了，根据需要自己修改即可。渲染效果如下图所示，

<template>
  <div class="wrap" v-if="this.$store.state.isShowWarnInfoIndex">
    <!-- 报警项--子组件的使用 -->
    <div class="warn-items infinite-list-item">
      <el-scrollbar style="height: 100%">
        <WarnItem
          :outProperty="item"
          v-for="(item, index) in itemList"
          :key="index"
          @showDetail="viewDetail"
        />
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import WarnItem from '../../components/Controls/WarnItem'
import * as SERVICE from '../../utils/service/serviceUtils'
export default {
  components: {
    WarnItem,
  },
  data() {
    return {
      itemList: [],
    }
  },
  methods:{
  /**子组件自定义的点击事件 */
  	viewDetail(value){	 
	}
  	//此处就可以通过Service发情数据请求，更新itemList，从而实现动态更新组件中的数据了，而不用担心组件内容不会同步更新的问题
   	dothings(){

	}
   }
  }
</script>
<style >
/* 全局样式定义 */

</style>
<style lang="less" scoped>
//局部样式定义
</style>