javascript - vuez父组件与子组件的动态传递问题？

问题描述

问 题

使用Element UI开发网站。在父组件中
html:
<el-table @row-click='handleRowHandle' :data="cashboxsearch" :row-class-name="tableRowClassName" border>

            <el-table-column prop="EventType" label="事件类型"  show-overflow-tooltip></el-table-column>
            <el-table-column prop="PlateNumber" label="车牌号"  show-overflow-tooltip></el-table-column>

</el-table>

data:

cashboxsearch: [{

      CashboxId:'', //钱箱ID
      EventType: '车辆超速',
      VehicleId:'', //车辆ID
      PlateNumber: '京A888888',  
      StartTime:'2017-03-02 18:00:00',
      StartMessage:'车辆超速',
      EndTime:'2017-03-02 19:00:00',
      EndMessage:'车辆超速',
      Warn:true,
      StartLONG:'120.963107',
      StartLAT:'52.003703',
      EndLONG:'108.952807',
      EndLAT:'32.011273'
    },

使用Element ui 方法@row-click='handleRowHandle'

handleRowHandle(row){

        var startPoint = [];
        startPoint.push(row.StartLONG);
        startPoint.push(row.StartLAT);

        var endPoint = [];
        endPoint.push(row.EndLONG);
        endPoint.push(row.EndLAT);
        
        this.mapoint.length = 0;
        this.mapoint.push(startPoint);
        this.mapoint.push(endPoint);
       console.log(this.mapoint) 
     },
      可以获取经纬度值。
      
 在子组件 <Amap :childmapoint="mapoint" :childmodel="parentmodel" style="height:45vh;width:100%"></Amap> 
 
 在子组件中 运行mounted函数时可以获取值。
 
   data:function(){
            return {
                positions:[],
            }
        },
        props:["childmapoint","childmodel"],
        mounted: function () { 
            console.log("jjjjjjj")
            console.log(this.childmapoint)
        //地图初始化  
        this.map = new AMap.Map(this.$el, {
            resizeEnable: true,
            zoom: 12,
        })
    //    this.positions = [[118.915171,32.12761],[118.915171,32.12531]];
    
        this.positions = this.childmapoint;
        for(let i=0;i<this.positions.length;i++){
            let marker = new AMap.Marker({
            position:this.positions[i],
          });
          marker.setMap(this.map);  //为marker指定目标显示地图。   
   
   
   mounted只能执行一次。
   

   问题：如何让每次点击时都改变经纬度值？        

解决方案

watch监听这个值

这篇关于javascript - vuez父组件与子组件的动态传递问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！