观看从 child 内部传递的道具

Question

我无法理解 Vue 中的监视机制。

我有一个 parent 组件，它将 Vehicle object 传递给 child 组件。

车辆：

{
  Number : 'some number', 
  Position: { lat: 'some lat', lng: 'some long', }
}

现在我有一个计时器可以在 parent 中更新这个 object。 Child也体现了变化。在 child 里面，我实际上是将这辆车 object 放在地图上作为标记。

我想在这里做的是观察道具（车辆）的变化，如果它发生变化，那么我想 smoothly/animate 标记到新更新的位置。

我试过：

watch: {

vehicle: function(newVal, oldVal){
 console.log('newVal'); 
}

},

它没有用，没有打印任何东西。我是否必须在 parent 组件中设置 watcher 才能观看和执行该动画？或者一个child可以观看属性传递给它？

编辑：

在parent中更换车辆object：

如果我从实时数据库接收数据，那么我所做的是维护一个 parent 数组，循环显示标记。

现在我循环数组并用它匹配新数据，然后简单地更新更新的值。

// 一些随机位置

var positions = [
                    {
                        lat: 24.827393, lng: 67.021769,
                    },
                    {
                        lat: 24.827279, lng: 67.028294,
                    },
                    {
                        lat: 24.834947, lng: 67.024829,
                    },
                    {
                        lat: 24.835719, lng: 67.012825,
                    },
                    {
                        lat: 24.8274599, lng: 67.0322483,
                    },
                ];

                var random = Math.floor((Math.random() * positions.length - 1) + 1);



    this.vehicles[0].position.lat: positions[random].lat;
this.vehicles[0].position.lng: positions[random].lng;

稍后我将它绑定到我的 child 组件，如下所示：

  <CustomMarker :key="vehicle.number" v-bind:vehicle="vehicle"
                      v-for="(vehicle, index) in vehicles"></CustomMarker>

基本上上面的随机位置数组只是为了测试我的流畅运动，完成后我会实时接收相同的坐标。

Answer 1

您的观察者将只响应直接对 vehicle 属性的更改，不会对 vehicle object 或 object 的属性所做的更改它的后代。我的意思是，如果 parent 组件使车辆 object 发生变异，例如：

this.vehicle.Position.lat = 123

和this.vehicle绑定到child组件的vehicleprop，那么watcher不会被触发，因为还是一样vehicleobject实例.

如果 parent 这样做：

this.vehicle = someOtherVehicle

那么watcher就会被触发

您可以通过将 deep 设置为 true 来指示 Vue 监视 vehicle object（和后代）的属性变化：

watch: {
  vehicle: {
    deep: true,
    handler(newVal, oldVal) {
      ...
    }
  }
}

有关详细信息，请参阅 watch docs。

如果你想知道旧的和新的纬度和经度值，那么一种方法是观察 child 中的 Position 属性，改变 Position 属性在 parent 中，并保持 { lat, lng } object 不变：

Child

watch: {
  'vehicle.Position'(oldVal, newVal) {
    const oldLat = oldVal.lat
    const newLat = newVal.lat
  }
}

Parent

// When you want to update the vehicle's position...
this.vehicle.Position = { lat: 123, lng: 456 }

观看从 child 内部传递的道具

Watching props passed from inside a child

vue.js

vuejs2

vue-cli-3