Vue中组件开发不能实时传参问题

描述

本人在Vue+Element开发中遇到一个奇怪的问题，element-dialog中包含一个自写的组件不能及时获取传参的变量，得到的是更改之前的数据。这让我感到无比蛋疼。。

可以有两种做法

第一种：在mapLineView 子组件中用watch监听positionID

父组件代码     

 <el-dialog

        title="查看线路"

        :visible="viewVisible"

        width="70%"

        :before-close="viewCancel"

        :destroy-on-close="true"

      >

         <mapLineView :positionID="positionIDLine"  />

      </el-dialog>

 

 子组件代码

export default {
  name: "sam-map-line-view",
  props: {
    positionID: {
      type: String
    }
  },
  data() {
    return {
      positionLineID: this.positionID
    };
  },
  
  },
  mounted() {
    this.init();
  },
  // 监听positionID 将它赋值给data的positionLineID，组件内直接使用
  watch:{
     positionID:function(newValue){
         this.positionLineID = newValue
     }   
  }
};

第二种：在对应父组件中使用 v-if，使之重新加载

      <el-dialog
        title="查看线路"
        :visible="viewVisible"
        width="70%"
        :before-close="viewCancel"
        :destroy-on-close="true"
      >
         <mapLineView :positionID="positionIDLine" v-if="resetMapView" />
      </el-dialog>

在打开dalog的时候加载组件传参

    view(row) {
      this.positionIDLine = row.positionID
      this.viewVisible = true
      this.resetMapView = false
      this.$nextTick(() => this.resetMapView = true)
    },
    viewCancel() {
      this.viewVisible = false;
    }