Nativescript-vue 监视道具

Posted 2023-04-13

【中文标题】Nativescript-vue 监视道具

【英文标题】：Nativescript-vue watch for props

【发布时间】：2021-06-06 16:12:02

【问题描述】：

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

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':()=>
      ......
     

但仍然无法正常工作。

请帮忙，谢谢

【参考方案1】：

通过 Nativescript 导航传递的道具可能不是反应式的，无论如何我不会让抽屉组件处理这个功能。

如果您使用的是 Vuex，您可以将这些属性（或整个逻辑）移动到存储中，并通过计算属性将它们获取到您的组件中。如果您的代码可以重复使用，您还可以设置mixin。

【参考方案2】：

vue props 不是响应式的 https://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')
      

【讨论】：

好的，我会试试的。谢谢

... 不工作。我认为 TomG 是正确的 - 通过 $navigateTo() 传递的道具不是反应性的，因为它们只传递一次（调用 $navigateTo 时）。

您的代码可能有错误 - 道具应该是 props:['location'] 而不是 props:['latitude','longitude']