父向子傳值，解決子組件數據的雙向數據綁定和子組件調用父組件中的方法

一、問題：在父組件向子組件傳值過程中，修改子組件中的值，父組件中的值也會發生變化

       方案：將傳遞 的值序列化，使用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()