Nativescript Vue:访问类函数

Posted

技术标签:

【中文标题】Nativescript Vue:访问类函数【英文标题】:Nativescript Vue: access class functions 【发布时间】:2020-02-07 04:17:45 【问题描述】:

我目前正在使用 Nativescript 和 Vuejs 构建应用程序。 我使用 Material BottomNavigationBar (https://github.com/Akylas/nativescript-material-components/blob/master/packages/nativescript-material-bottomnavigationbar/README.md)。 我需要使用两种方法:

selectTab(索引:数字) showBadge(index: number, value?: number)

现在我需要调用这些方法,这就是问题所在。我怎么做?

我的代码:ma​​in.js

import BottomNavigationBar from 'nativescript-material-bottomnavigationbar/vue';
import BottomNavigationTab from 'nativescript-material-bottomnavigationbar/vue';

Vue.use(BottomNavigationBar);
Vue.use(BottomNavigationTab);

Footer.vue:

<BottomNavigationBar titleVisibility="Never" activeColor="#0285ff" inactiveColor="#5c687c"
                                     backgroundColor="#f5f5f5" @tabSelected="onBottomNavigationTabSelected" row="1"
                                     class="footer" ref="navBar" :selectedTab="2">
<BottomNavigationTab icon="~/assets/images/logo.png"/>
<BottomNavigationTab icon="~/assets/images/chat.png"/>
<BottomNavigationTab icon="~/assets/images/settings.png"/>
</BottomNavigationBar>
...
mounted() 
this.$refs.navBar.nativeView.selectTab(2)

这不起作用,并说 nativeView 未定义。

有没有办法访问这些类方法?

问候, 托比亚斯

【问题讨论】:

安装可能为时过早。为什么不简单地在BottomNavigationBar 上设置selectedTabIndex 而不是在挂载时调用该方法。 【参考方案1】:

找到了解决方案!

需要等到组件加载完毕。

我现在的方式:

组件:

<BottomNavigationBar titleVisibility="Never" activeColor="#0285ff" inactiveColor="#5c687c"
                             backgroundColor="#f5f5f5" @tabPressed="pressedNavigation" @tabSelected="pressedNavigation"
                             row="1" class="footer" ref="navBar" @loaded="loaded">
            <BottomNavigationTab icon="~/assets/images/logo.png"/>
            <BottomNavigationTab icon="~/assets/images/chat.png"/>
            <BottomNavigationTab icon="~/assets/images/settings.png"/>
</BottomNavigationBar>

方法:

 loaded(args) 
     this.loadedNavBar = true;
     this.navBar = args.object
     if (this.selectedTab !== null) this.navBar.selectTab(this.selectedTab)
  ,

我选择索引并将其存储在一个变量中。加载组件后,我可以调整选择。

【讨论】:

【参考方案2】:

您可以在标签中添加 ref="mybar",然后在组件脚本中的 this.$refs.mybar 下找到它。

就像在 this example 上所做的一样。

更多详情请见vue documentation。

【讨论】:

不起作用。我添加了this.$refs.navBar.showBadge(1,50),结果是:Error in mounted hook: "TypeError: this.$refs.navBar.showBadge is not a function【参考方案3】:

当触发挂载时,您的组件尚未加载。 我建议在您的导航栏组件上使用加载的事件,然后触发您的方法。

<BottomNavigationBar titleVisibility="Never" activeColor="#0285ff" inactiveColor="#5c687c"
                                 backgroundColor="#f5f5f5" @tabSelected="onBottomNavigationTabSelected" row="1" @loaded="onNavbarLoaded"
                                 class="footer" ref="navBar" :selectedTab="2">

    <BottomNavigationTab icon="~/assets/images/logo.png"/>
    <BottomNavigationTab icon="~/assets/images/chat.png"/>
    <BottomNavigationTab icon="~/assets/images/settings.png"/>
</BottomNavigationBar>

onNavbarLoaded(evt) 
    this.$refs.navBar.nativeView.selectTab(2);
    // I am not sure if you actually have to easy nativeView..
    this.$refs.navBar.selectTab(2);

【讨论】:

以上是关于Nativescript Vue:访问类函数的主要内容,如果未能解决你的问题,请参考以下文章

初始化 Nativescript Vue App 的好方法

无法在 NativeScript Vue 模态中访问道具

android中的后退按钮打破nativescript-vue访问控制登录注销

NativeScript Vue 发送带有表单数据的请求(multipart/form-data)

Nativescript Vue:从ListView中的itemTap获取数组中的项目

Nativescript Vue:如何访问 v-template 中的数据属性?