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: 'ssdls, 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>