laravel 如何在Vue js中将数据从一个组件传递到另一个组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46152847/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass data from one component to other in vue js?
提问by Hitendra
I am learning vue+laravel. I want to pass value from one component to other component? I have used vue router for routing.
我正在学习 vue+laravel。我想将值从一个组件传递到另一个组件？我已经使用 vue 路由器进行路由。
Here is the code for first and second component. SelectPerson.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>
second component SelectTimeSlot.vue
第二个组件 SelectTimeSlot.vue
<template>
<h5>Welcome, You have selected **{{numberOfPersons}}** persons.</h5>
</template>
Can anybody help me do it?
有人可以帮我做吗？
回答by Hiren Gohel
To pass data from one component to other component, you need to use props:
要将数据从一个组件传递到另一个组件，您需要使用props：
First component:
第一个组件：
<second-component-name :selectedOption="selectedOption"></second-component-name>
<script>
export default {
components: {
'second-component-name': require('./secondComponent.vue'),
},
data() {
return {
selectedOption: ''
}
}
}
</script>
Second Component:
第二部分：
<template>
<div>
{{ selectedOption }}
</div>
</template>
<script>
export default {
props: ['selectedOption']
}
</script>
Please visit this link.
请访问此链接。
Hope this is helpful for you!
希望这对你有帮助！
回答by Raj
Say I have a page with this HTML.
假设我有一个包含此 HTML 的页面。
<div class="select-all">
<input type="checkbox" name="all_select" id="all_select">
<label @click="checkchecker" for="all_select"></label>
</div>
the function checkchecker is called in my methods
在我的方法中调用了函数 checkchecker
checkchecker() {
this.checker = !this.checker
}
This will show or hide my div on that page like this
这将像这样在该页面上显示或隐藏我的 div
<div v-show="checker === true" class="select-all-holder">
<button>Select All</button>
</div>
Now if I also want to toggle another div which is inside my child component on that page I will pass the value like this.
现在，如果我还想切换该页面上我的子组件内的另一个 div，我将传递这样的值。
<div class="content-section clearfix">
<single-product :checkers="checker"></single-product> //This is calling my child component
</div>
Now in my Child component I will have a prop declared like this
现在在我的 Child 组件中，我将有一个像这样声明的道具
checkers: {
type: String,
default: false,
},
This is how I will write my div in my child component
这就是我将如何在我的子组件中编写我的 div
<div v-show="checkers === true" class="select-holder clearfix">
<input type="checkbox" class="unchecked" name="single_select" id="1">
</div>
