如何将道具传递给 Vue 中的另一个组件

Question

我正在尝试以某种方式通过 $router.push 传递预定义的表单数据，因此当单击 link 时，应该在表单中定义一些预定义的 data/props像 dropdrown 或只是将一些数据传递到输入表单

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

在我要传递数据的另一个 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

你尝试了哪些方法？

我看到两种可能性：

在父组件中设置一个属性
使用 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>

如何将道具传递给 Vue 中的另一个组件

How to pass props to form in another component in Vue

vue.js

vuejs2

vue-component

vuex