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

描述

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

可以有两种做法

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

父组件代码     

 

         

      

 

 子组件代码

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,使之重新加载


      
         
      

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

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

 

你可能感兴趣的:(vue,vue.js)