将 props 传递给其他组件

Posted 2023-04-14

【中文标题】将 props 传递给其他组件

【英文标题】：Passing props to an other component

【发布时间】：2019-04-03 18:42:46

【问题描述】：

我正在用 VueJs 做 Nativescript

我有一个模板，我想将一些数据传递给下一个组件/页面。

对于如何在the 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>
`,

但它是空的？我需要做什么？

【参考方案1】：

应该是标准的Vue获取props的方式，

this.$navigateTo(PageB, 
            props: 
                hello: "World!"
            
);

在PageB

<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 sample。