如何在组件(兄弟姐妹)之间传输数据Vue?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在组件(兄弟姐妹)之间传输数据Vue?相关的知识,希望对你有一定的参考价值。
在HeaderComponent方法中,单击时会调用“clickPrices”
<template>
<header>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal"><a href="/">Company name</a></h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark">Enterprise</a>
<a class="p-2 text-dark" @click="clickPrices()">Get pricing</a>
</nav>
<a class="btn btn-outline-primary " href="#">Sign up</a>
</div>
</header>
</template>
<script>
export default {
name: "HeaderComponent",
methods: {
clickPrices() {
...
},
},
}
</script>
<style scoped>
</style>
还有一个定价组件,我在方法'getPricing'中向服务器发出请求
<template>
<div class="wrap-pricing">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-4">Pricing</h1>
<p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Lorem</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$10 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
<button type="button" class="btn btn-lg btn-block"></button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import router from '../routes.js';
import { axios } from 'axios';
export default {
name: "PriceComponent",
methods: {
getPricing() {
axios.get('api/pricing').then((response) => {
//some actions
router.push('prices');
});
},
},
}
</script>
<style scoped>
</style>
我该如何处理'сlickPrices'HeaderComponent方法的结果?或者我在等待您的方式,如何通过单击一个组件来获取另一个数据
答案
您可以发出事件并让父组件处理提取并将数据作为props传递给子组件。
或者另一种方式是直接听取如下事件
第1部分:
this.$root.$emit('clickPrices', data);
第2部分:
mounted() {
this.$root.$on('clickPrices', data => {
this.getPricing();
});
}
查看@alex的答案
另一答案
由于您使用的是2个独立组件(一个不包含在另一个组件中),因此您无法传递道具
你可以做的事情 -
- 而不是在点击时获取所有价格,只需创建一个这样的创建钩子,这将在您创建组件时获取所有定价细节 -
created () { this.getPricing() }, methods: { getPricing() { axios.get('api/pricing').then((response) => { //some actions router.push('prices'); }); }, },
- 使用状态,当用户单击按钮时,将获取定价详细信息并在状态中添加。你可以在应用程序的任何地方使用状态,如下所示 -
this.$store.state.prices
让我知道它是否有效,如果没有,我们会为您找到其他解决方案!
以上是关于如何在组件(兄弟姐妹)之间传输数据Vue?的主要内容,如果未能解决你的问题,请参考以下文章