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

野性酷女 2023-02-21 12:29 28阅读 0赞

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

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