vue.js - 将 props 传递给其他组件
问题描述
我正在用 VueJs 做 Nativescript
我有一个模板,我想将一些数据传递给下一个组件/页面。
关于如何在docs的下一个组件中捕获数据并没有任何真正的解释。
唯一接近它的是Passing props to the modal
所以我试过了。
onSubmit: function (args) {
console.log(this.searchValue);
this.$navigateTo(choose_startpoint, {
props: {
hospital: this.searchValue
}
})
}
this.searchValue
是用户在 searchBar 中输入的值
因此,在另一个文件中,我尝试像这样捕获它:
props: ['hospital'],
template: `
<Page class="manual_input_page" actionBarHidden="true">
<StackLayout>
<Button class="fas btn btn-lb" text="\uf060 Kies je startpunt" @tap="$navigateBack"></Button>
<SearchBar class="searchbar" :text="searchValue" hint="Search" textFieldBackgroundColor="white" @textChange="onTextChanged" @submit="onSubmit" />
<ListView class="list-group" for="items in startpoints" @itemTap="onItemTap" separatorColor="transparent">
<v-template>
<Label class="item" :text="items.name" />
</v-template>
</ListView>
<Label class="bottom-info" :text="hospital"></Label>
</StackLayout>
</Page>
`,
但它是空的?我需要做什么?
解决方案
应该是标准的 Vue 获取 props 的方式,
this.$navigateTo(PageB, {
props: {
hello: "World!"
}
});
在页面 B
<template>
<Page class="page">
<ActionBar title="PageB" class="action-bar" />
<ScrollView>
<StackLayout class="home-panel">
<Label class="h2 description-label" :text="$props.hello" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
props: ['hello'],
data() {
return {};
}
};
</script>
这是一个Playground 示例。
推荐阅读
- javascript - 如何使用 redux 读写 cookie
- python - 'choices' 必须是包含(实际值,人类可读名称)元组的可迭代
- vhdl - FPGA 中的低通滤波器
- ios - 用户切换耳机时如何更改 AVAudioPlayerNode 格式
- python - - 不支持的操作数类型:“int”和“list”
- javascript - Javascript 仅显示一行(记录集)而不是多行
- confusion-matrix - 没有“真阳性”数据的精确召回计算
- mongodb - Go mongodb驱动程序忽略聚合中的管道
- powershell - 流分析使用 powershell 创建 Gzip 压缩输出不起作用
- c++ - 无法使用 lldb 和 VSCode 调试简单的 C++ 程序