通过路由器链接传递道具

Question

我对 Vue 3 路由器很陌生，所以真的需要帮助。 我正在尝试通过路由器链接传递道具。

所以，我有一个组件 Post，其中 prop post 是一个对象。

Post.vue

export default defineComponent({
  name: 'Post',
  props: {
    post: {
      type: Object as PropType<Post>,
      required: true,
    },
  },

我有一个组件EditPostForm，其中应该与Post组件中的对象完全相同。

EditPostForm.vue

export default defineComponent({
  name: 'EditPostForm',
  props: {
    post: {
      type: Object as PropType<Post>,
      required: true,
    },
  },

这就是 Post 组件中的路由器链接。

Post.vue

<router-link
  class="..."
  :to="{
     path: '/post/edit',
     props: post,
     query: { post: post.id },
   }"
   >Edit
</router-link>

路由器/index.ts

{
    path: '/post/edit',
    name: 'Edit Post',
    component: EditPostForm,
    props: Object as PropType<Post>,
},

我遇到了一个错误

错误

[Vue warn]: Missing required prop: "post" 
  at <EditPostForm fullPath="/post/edit?post=3" hash="" query= {post: "3"}  ... > 
  at <RouterView> 
  at <App>

Answer 1

据我所知，你不能直接使用

<router-link>

传递 props，但是你可以设置

vue-router

将路线

params

作为

props

传递给组件：

{
    path: '/post/edit/:prop1/:prop2/:prop3', // set your desired props as params in the url
    name: 'Edit Post',
    component: EditPostForm,
    props: true, // set props to true, this will pass the url params as props
},

然后，在模板中，您可以在

params

中指定

:to

属性：

<router-link
  class="..."
  :to="{
     path: '/post/edit',
     params: post, // <-- changed 'props' to 'params'
     query: { post: post.id },
   }"
   >Edit
</router-link>

传递道具也可以通过

Object mode

或

Function mode

来完成，在文档中阅读有关它们的更多信息。

对象模式不会有帮助，因为它主要用于静态道具，但如果我上面提供的内容不适合您的用例，也许您可以使用函数模式。

Answer 2

使用 Provide/Inject 将数据传递给任何子组件：

引自Vue.js文档：

父组件可以充当其所有后代的依赖提供者。后代树中的任何组件，无论有多深，都可以将组件提供的依赖项注入其父链中。

因此，在您的情况下哪些道具不起作用，您可以使用 Provide/Inject：
在您的 Post.vue 中，不要定义 props，而是使用 Provide:

<script>
    export default {
      data() {
        return {
          posts: {
            // some key:value pair of data
          },
        };
      },
      provide() {
        //sending data to any child component
        return {
          posts: this.posts,
        };
      },
    };
</script>

在您的 EditPostForm.vue 中，使用 inject 检索数据：

<script>
export default {
  inject: {
    //receiving data from parent component
    post: {
      type: Object,
      required: true,
    },
  },
};
</script>