Laravel 如何在vue js中将数据从一个组件传递到另一个组件？

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

下面是第一个和第二个组件的代码。 SelectPerson.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>

......


****
下一个
......
从“./SelectTimeSlot.vue”导入SelectTimeSlot
导出默认值{
道具：['numberOfPersons']，
数据（）{
返回{
**输入人数：0**
}
},
方法：{
选择时隙（）{
这是.$router.push（{name:'SelectTimeSlot'}）；
}
}
}

第二部分 选择timeslot.vue

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

欢迎，您已选择**{{numberOfPersons}}**人。

---

有人能帮我吗？

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

道具

：

第一个组件：

<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>

导出默认值{
组成部分：{
“第二个组件名称”：需要（“./secondComponent.vue”），
},
数据（）{
返回{
已选择选项：“”
}
}
}

第二个组件：

<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>

{{selectedOption}
导出默认值{
道具：['selectedOption']
}

请访问

---

希望这对你有帮助

假设我有一个包含此HTML的页面

<div class="select-all">
    <input type="checkbox" name="all_select" id="all_select">
    <label @click="checkchecker" for="all_select"></label>
</div>

这将在该页面上显示或隐藏我的div，如下所示

这就是我将如何在我的子组件中编写div

<div class="content-section clearfix">
   <single-product :checkers="checker"></single-product> //This is calling my child component
</div>

checkers: {
  type: String,
  default: false,
},

<div v-show="checkers === true" class="select-holder clearfix">
      <input type="checkbox" class="unchecked" name="single_select" id="1">
    </div>