Nativescript Vue：访问类函数答案

【问题标题】：Nativescript Vue: access class functionsNativescript Vue：访问类函数
【发布时间】：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)

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

我的代码：
main.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 而不是在挂载时调用该方法。

标签： vuejs2 nativescript nativescript-vue

【解决方案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);
}

【讨论】：