Nativescript-vue监视道具

Question

在我的ns-vue应用程序中，我看到了一个问题。我有一个应用程序，是基于这个抽屉导航模板https://plugins.nativescript.rocks/plugin/@nativescript/template-drawer-navigation-vue。我想使用地理定位整个应用程序，所以我把这个模块到DrawerContent.vue。在这个文件中，我将道具传递给其他模块：

onNavigationItemTap(component) {
  this.$navigateTo(component, {
    clearHistory: true,
    props:{
      latitude: this.latitude,
      longitude: this.longitude,
    }
   });
   utils.closeDrawer();
}

纬度和经度定期更新。

在Home.vue上我有：

props:['latitude','longitude'],
...
....
watch:{
   latitude:()=>{
      console.log('LAT change detected')
      }
}

但这不管用。我尝试了很多来自整个网络的选择，例如：

watch: {
   $props: {
      handler() {
        this.parseData();
      },
      deep: true,
      immediate: true,
  }
}

或

watch:{
   '$props':()=>{
      ......
     }
}

但还是不起作用。

请帮忙，谢谢

Answer 1

通过Nativescript导航的道具可能不是被动的，无论如何，我不会让抽屉组件处理这个特性。

如果使用Vuex，可以将这些属性(或整个逻辑)移动到存储区，并通过计算的属性在组件中获取它们。如果代码可以重用，也可以设置混和。

Answer 2

vue道具不是反应性https://v2.vuejs.org/v2/guide/reactivity.html，但可以将object作为包含latitude和longitude的属性传递。

data () {
    return {
      location: {
          latitude: ...,
          longitude: ...,
      }
    };
},
...
this.$set(this.location, 'latitude', latitude);
...
onNavigationItemTap(component) {
  this.$navigateTo(component, {
    clearHistory: true,
    props:{
      location: this.location
    }
   });
   utils.closeDrawer();
}

守望者：

props:['location'],
...
watch:{
   'location.latitude' () {
      console.log('LAT change detected')
      }
}