在vue路由器中的兩個組件之間傳遞道具

Question

我知道有很多問題可以回答我的問題，但是我無法讓他們一個人跑。 我想使用vue路由器將字符串從組件A傳遞到組件B。 在以下示例中，如何從組件B中的組件A輸出'name'的值。

組件A模板：

<form >
<input placeholder="type your name" v-model="name">
<button v-on:click="sayHello" type="submit" >Submit</button>

    <script>
sayHello() {
     this.$router.push({ name: 'ComponentB', params: {
        name: '{this.name}'}, props:true });
    }
</script>

成分B：

<template>
<div class="container">
    <h1> Hello {{$route.params.name}}!</h1>
      </div>

    <script>
export default {
    data(){
        return{
            props: ['name']
        }
    }
}
</script>

路由器

{
  path: '/ComponentB',
  name: "CompB",
  component: CompB,
  props: true
}

仍然不知道如何在不使用url參數的情況下實現這一目標。 如果我將CompB的路徑更改為ComponentsB/:name它將起作用。

Answer 1

您的路由器屬性在組件A中聲明的this.$route中

因此，在您的情況下：

成分A：

<script>
sayHello() {
     this.$router.push({ name: 'ComponentB', query: {
        name: this.name }, props:true });
    }
</script>

成分B：

<template>
 <div class="container">
    <h1> Hello {{ $route.query.name }}!</h1>
 </div>
</template>