父向子传值，解决子组件数据的双向数据绑定和子组件调用父组件中的方法

一、问题：在父组件向子组件传值过程中，修改子组件中的值，父组件中的值也会发生变化

       方案：将传递 的值序列化，使用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()