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)现在我需要调用这些方法,这就是问题所在。我怎么做?
我的代码: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
而不是在挂载时调用该方法。
【参考方案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:访问类函数的主要内容,如果未能解决你的问题,请参考以下文章
android中的后退按钮打破nativescript-vue访问控制登录注销
NativeScript Vue 发送带有表单数据的请求(multipart/form-data)