当前位置：首页 > news >正文

网站尾部设计/企业网站建设步骤

news 2025/8/4 13:07:12

网站尾部设计,企业网站建设步骤,网站托管费用多少,wordpress电影插件1 Vue子组件封装 PS：子组件样式如下图所示，采用对象作为要传递的值。子组件的封装代码如下所示，此处通过watch-deep执行对象值的监听，否则会出现在父组件中使用子组件时（尤其是v-for列表循环）&#xff0…

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 = undefinedthis.$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>