vue.js - 观看 Prop 从 child 体内传递过来

Question

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

我有一个父组件，它将车辆对象传递给子组件。

车辆:

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

现在我有一个计时器来更新父对象中的这个对象。 child 也反射(reflect)了变化。在 child 内部，我实际上将此车辆对象作为标记放置在 map 上。

我在这里想做的是观察 Prop (车辆)的变化，如果它发生变化，那么我想平滑/动画标记到新更新的位置。

我尝试这样做:

watch: {

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

},

它不起作用，没有打印任何东西。我是否必须在父组件中创建观察者才能观看并执行该动画？或者 child 可以观看传递给它的属性(property)？

编辑:

父级中车辆对象的更改:

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

现在我循环数组并将新数据与其匹配，然后简单地更新已更新的值。

//一些随机位置

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;

后来我将它绑定(bind)到我的子组件，如下所示:

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

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

Answer 1

您的观察者只会响应直接对 vehicle 属性的更改，不会对 vehicle 对象或其后代的属性所做的更改。我的意思是，如果父组件改变车辆对象，例如:

this.vehicle.Position.lat = 123

并且 this.vehicle 绑定(bind)到子组件的 vehicle 属性，那么观察者不会被触发，因为它仍然是相同的 vehicle 对象实例。

如果家长这样做:

this.vehicle = someOtherVehicle

然后观察者将被触发。

您可以通过将 deep 设置为 true 来指示 Vue 监视 vehicle 对象(及其后代)的属性更改:

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

请参阅 watch docs 了解更多信息。

---

如果您想知道旧的和新的纬度和经度值，那么一种方法是观察子级中的 Position 属性，改变父级中的 Position 属性，并保持 { lat, lng } 对象不可变:

child

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

父级

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