nativescript 传递道具 vue

问题描述

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

Having trouble passing a prop in nativescript this.$navigateTo()

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

我尝试以这种方式传递道具

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

still, In the child component I get an undefined ,this is the child component :

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

    console.log(this.props);
  }
  }}

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

Any ideas? I'm new with vue.js so there is a good chance I'm missing something basic in my code

推荐答案

正确的导航方式是:

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

你只需要像这样抓住它然后或你下一页:

You just need to catch it like this then or you next page:

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

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

and you can use it then like this in the JS:

this.hospital
this.startpoint
this.endpoint

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

If you wish to use it in the template you need to this:

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

这篇关于nativescript 传递道具 vue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！