laravel - 如何在Vue js中将数据从一个组件传递到另一个组件？

我正在学习 vue+laravel。我想将值从一个组件传递到另一个组件？我已经使用 vue 路由器进行路由。

这是第一个和第二个组件的代码。
选择人.vue

<template>
    ......
      <div>
        <input type="number" class="form-control" name="numberOfPersons" placeholder="Enter number of persons here" **v-model="inputPersons"**>
        <br>
        **<SelectTimeSlot v-bind:numberOfPersons="inputPersons"></SelectTimeSlot>**
      </div>
      <div>
        <button class="btn btn-default float-right mt-2" v-on:click="selectTimeSlots">Next</button>
      </div>
    ......
</template>
<script>
import SelectTimeSlot from './SelectTimeSlot.vue'
  export default{
    props:['numberOfPersons'],
    data(){
        return{
          **inputPersons:0**
        }
    },
    methods:{
      selectTimeSlots(){
        this.$router.push({name:'SelectTimeSlot'});
      }
    }
  }
</script>

第二部分
选择时间槽.vue

<template>
<h5>Welcome, You have selected **{{numberOfPersons}}** persons.</h5>
</template>

有人可以帮我做吗？

最佳答案

要将数据从一个组件传递到另一个组件，您需要使用 props :

第一个组件 :

<second-component-name :selectedOption="selectedOption"></second-component-name>

<script>
export default {

   components: {
        'second-component-name': require('./secondComponent.vue'),
   },
   data() {
        return {
          selectedOption: ''
        }
    }
}
</script>

第二个组件 :

<template>
    <div>
        {{ selectedOption }}
    </div>
</template>

<script>
    export default {
        props: ['selectedOption']
    }
</script>

请访问 this link 。

希望这对你有帮助!

关于laravel - 如何在Vue js中将数据从一个组件传递到另一个组件？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46152847/