[英]How to pass props to child component in vue
I have a parent component where I am doing the API call and getting the response.我有一个父组件,我在其中进行 API 调用并获取响应。 So what I am trying to do is pass this response as a prop to child component in Vue.所以我要做的就是将此响应作为道具传递给 Vue 中的子组件。 So here is my parent component and the call:所以这是我的父组件和调用:
<button class="btn button col-2" @click="addToCart()">
Add to cart
</button>
addToCart: function () {
let amount = this.itemsCount !== "" ? this.itemsCount : 1;
if(this.variationId != null) {
this.warningMessage = false;
cartHelper.addToCart(this.product.id, this.variationId, amount, (response) => {
this.cartItems = response.data.attributes.items;
});
} else {
this.warningMessage = true;
}
},
So I want to pass this "this.cartItems" to the child component which is:所以我想将此“this.cartItems”传递给子组件,即:
<template>
<div
class="dropdown-menu cart"
aria-labelledby="triggerId"
>
<div class="inner-cart">
<div v-for="item in cart" :key="item.product.id">
<div class="cart-items">
<div>
<strong>{{ item.product.name }}</strong>
<br/> {{ item.quantity }} x $45
</div>
<div>
<a class="remove" @click.prevent="removeProductFromCart(item.product)">Remove</a>
</div>
</div>
</div>
<hr/>
<div class="cart-items-total">
<span>Total: {{cartTotalPrice}}</span>
<a href="#" @click.prevent="clearCartItems()">Clear Cart</a>
</div>
<hr/>
<router-link :to="{name: 'order'}" class="btn button-secondary">Go To Cart</router-link>
</div>
</div>
</template>
<script>
export default {
computed: {
},
methods: {
}
};
</script>
So I am quite new in vue if you can help me with thi, I would be really glad.因此,如果您能帮助我解决这个问题,我对 vue 还是很陌生,我会非常高兴。
Vue.component('Child', { template: ` <div class=""> <p>{{ childitems }}</p> </div> `, props: ['childitems'] }) new Vue({ el: '#demo', data() { return { items: [] } }, methods: { getItems() { //your API call setTimeout(() => { this.items = [1, 2] }, 2000); } } }) Vue.config.productionTip = false Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <button @click="getItems">get data</button> <Child v-if="items.length" :childitems="items" /> </div>
You can wait for response, and when you gate this.cartItems
then render your child component with a v-if="this.cartItems.length"
condition您可以等待响应,当您this.cartItems
时,然后使用v-if="this.cartItems.length"
条件渲染您的子组件
Passing props is quite simple.传递道具非常简单。 If cartItems
is what you wan´t to pass as a prop, you can do this:如果您不想将cartItems
作为道具传递,您可以这样做:
<my-child-component :cartItems="cartItems"></my-child-component>
In this case you implemented your child as myChildComponent
.在这种情况下,您将孩子实现为myChildComponent
。 You pass cartItems
with :cartItems="cartItems"
to it.您将带有 : cartItems
:cartItems="cartItems"
的 cartItems 传递给它。 In your child you do this:在你的孩子身上,你这样做:
props: {
cartItems: Object
}
Now you can use it with this.cartItems
in your methods or {{cartItems}}
in your themplate.现在您可以在方法中使用this.cartItems
或在模板中使用{{cartItems}}
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.