nativescript 传递道具 vue

Posted 2023-04-14

【中文标题】nativescript 传递道具 vue

【英文标题】：nativescript passing props vue

【发布时间】：2019-04-10 22:21:37

【问题描述】：

在 nativescript this.$navigateTo() 中传递 prop 时遇到问题

 <template>
       <stack-layout v-for="meme in memes">
        <Image :src="meme.url" @tap="goToEditPage(meme.url)"/>
       </stack-layout>
      </template>

<script>
import EditMeme from './EditMeme'
  export default 
    computed: 
      memes()
        return this.$store.getters.memes
      
    ,
    components: 
      EditMeme
    ,
    methods: 
      goToEditPage(ImageUrl) 
        this.$navigateTo(EditMeme,  context:  propsData:  Image: ImageUrl  );
      
    
  

</script>

我尝试传递道具this way

仍然，在子组件中我得到一个 undefined ， 这是子组件：

  export default 
props: ['Image'],
methods: 
  onButtonTap() 

    console.log(this.props);
  
  

有什么想法吗？我是 vue.js 的新手，所以很有可能我的代码中缺少一些基本的东西

【参考方案1】：

正确的导航方式是这样的：

this.$navigateTo(confirmRoute, 
                    props: 
                        hospital: "hospital A",
                        startpoint: "startpoint Y",
                        endpoint: "point x"
                    
                )

你只需要这样捕捉它然后或者你下一页：

 props: ['hospital', 'startpoint', 'endpoint'],

然后你可以在 JS 中像这样使用它：

this.hospital
this.startpoint
this.endpoint

如果你想在模板中使用它，你需要这样做：

<template>
    <Page>
            <Label  :text="$props.hospital.name">
            </Label>
        </FlexBoxLayout>
    </Page>
</template>

【参考方案2】：

如果使用原生脚本 vue：

@tap="$navigator.navigate('/settings/your_page', props: isEditMode: true )"

在 your_page.vue 中：

props: isEditMode: type: Boolean, default: false, required: false ,

mounted() console.log("isEditMode :>> ", this.isEditMode);