如何在Vue的另一个组件中传递道具以形成

Question

我正在尝试以某种方式通过 $router.push 传递预定义的表单数据，因此当单击该链接时，一些预定义的数据/道具应该以 dropdrow 之类的形式定义，或者只是将一些数据传递到输入表单

我尝试了不同的方法，但没有任何效果，有人可以帮助我吗？

在我要传递数据的另一个 Vue 组件中输入：

<input type="text" name="" value="">

点击路由器：

<ul>
  <li @click="clickRouter(path)"> Click here </li>
</ul>

data() {
    return {
      path: '/products',
    };
  },
  methods: {
    clickRouter(link) {
      this.$router.push(link);
    },
  },

更新： 根据Programmatic Navigation，您可以这样做：

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

现在这个 URL ?plan=private 我希望能够做类似/register?name=Myname的事情

这将在组件中预填充名称输入。

干杯

Answer 1

你尝试了哪些方法？

我看到了两种可能性：

1. 在父组件中设置属性
2. 使用 vuex

clickRouter-方法会设置属性，然后将其绑定到input-字段中。

更新：

index.js（路由器）：

import Vue from "vue";
import Router from "vue-router";
import register from "@/components/register";

Vue.use(Router);

const router = new Router({
    routes: [
        {
            path: "/register",
            name: "register",
            component: register
        }
    ]
});
export default router;

App.vue：

<template>
    <div id="app">
        <header>
            <button @click.stop.prevent:="clickRouter(path)">Go to register</button>
        </header>
        <main>
            <router-view></router-view>
        </main>
    </div>
</template>

<script>
    export default {
        name: "app",
        data () {
            return {
                path: '/register',
                prefill: ''
            }
        },
        methods: {
            clickRouter(link) {
                this.prefill = 42;
                this.$router.push({ path: link, query: { plan: 'private' }});
            }
        }
    }
</script>

register.vue:

<template>
    <input <input type="text" name="" :value="prefill">
</template>

<script>
    export default {
        computed: {
            prefill() {
                return this.$parent.prefill;
            }
        }
    }
</script>