一、问题:在父组件向子组件传值过程中,修改子组件中的值,父组件中的值也会发生变化
方案:将传递 的值序列化,使用JSON.stringify(),子组件在解析JSON.parse()
父组件:
<template>
<div class="work-content">
<table>
<thead>
<tr>
<td>序号</td>
<td>名称</td>
<td>说明</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in indexList" @click="chooseDataItem(item.id)" :class="selectedID==item.id?'selected-tr':''">
<td>{{(index+1) + ((page.currentPage-1) * page.onePageCount)}}</td>
<td>{{item.nam}}</td>
<td>{{item.des}}</td>
<td>
<span class="btns data-info" @click.stop="showPageInfo(item)"></span>
<span class="btns data-edit" @click.stop="showPageEdit(item)"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="work_page">
<Pagers :page="page"/>
</div>
<IndustryIndexEdit ref="indexEditChild" ></IndustryIndexEdit>
</div>
</template>
<script>
import Pagers from "../pagers";
import IndustryIndexEdit from "./IndustryIndexEdit"
export default {
name: "IndustryIndex",
props: ['isShowMenu'],
components: {
Pagers,
IndustryIndexEdit,
},
data() {
return {
page: {totalRecords: 0, onePageCount: 2, currentPage: 1},
indexType: [
{
value: '0',
label: '供地类'
},
{
value: '1',
label: '租赁类'
},
],
indexList:[
],
}
},
mounted() {
this.initData()
},
methods: {
// 显示编辑页
showPageEdit(item) {
this.$refs.indexEditChild.isShowThisPage = true;
this.$refs.indexAddChild.isShowThisPage = false;
this.$refs.indexEditChild.setDataInfo(JSON.stringify(item));
//this.editData = item;
this.$refs.indexInfoChild.isShowThisPage = false;
this.$parent.isShowMenu = false;
},
},
watch: {
}
}
</script>
<style lang="scss" scoped>
</style>
子组件:
<template>
<!-- 信息编辑 -->
<div class="workInfo-block" v-show="isShowThisPage">
<div class="workInfo-title">
信息编辑
<span class="data-close" @click="hideThisPage"></span>
</div>
<div class="workInfo-content">
<Row>
<Col span="8">
名称:
</Col>
<Col span="16" class="workInfo-data">
<Input v-model="dataInfo.nam"></Input>
</Col>
</Row>
<Row>
<Col span="8">
数据类型:
</Col>
<Col span="16" class="workInfo-data">
<Select placeholder="数据类型" v-model="dataInfo.typ">
<Option v-for="item in indexType" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</Col>
</Row>
<Col span="24" style="text-align: center; margin-bottom: 30px;margin-top: 30px;display: flex;justify-content: space-around;">
<Button style="background-color: #a3afcf;color: #f0f6ff" @click="closeEdisModal">取消</Button>
<Button type="primary" @click="updateIndex">编辑</Button>
</Col>
</Row>
</div>
</div>
</template>
<script>
export default {
name: "IndustryIndexEdit",
data() {
return {
dataInfo: {}, // 数据信息
isShowThisPage: false, // 是否显示本页面
indexType: [
{
value: '0',
label: '供地类'
},
{
value: '1',
label: '租赁类'
},
],
};
},
mounted() {
this.pageOnresize();
},
methods: {
setDataInfo(value) {
this.dataInfo = JSON.parse(value);
},
// 隐藏该页面
hideThisPage() {
this.isShowThisPage = false;
},
// 页面大小事件
pageOnresize() {
$('.workInfo-content').css('max-height', $(window).height() - $('.top_block').outerHeight() - 100);
$(window).resize(function () {
$('.workInfo-content').css('max-height', $(window).height() - $('.top_block').outerHeight() - 100);
});
},
}
};
</script>
二、问题:在子组件里面调用父组件的方法
方法:that.$parent.initData()