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>