如何在组件（兄弟）Vue之间传输数据？

Question

在 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 方法的结果？ 还是我在等你的方法，如何通过点击一个组件来获取另一个组件的数据

Answer 1

您可以发出一个事件并让父组件处理获取并将数据作为道具传递给子组件。

或者另一种方式是直接监听事件如下

组件 1：

this.$root.$emit('clickPrices', data);

组件 2：

mounted() {
    this.$root.$on('clickPrices', data => {
        this.getPricing();
    });
}

查看@alex的答案

Answer 2

由于您使用的是 2 个独立的组件（其中一个不包含在另一个中），因此您无法传递 props

你可以做的事 -

1. 不要在点击时获取所有价格，只需像这样创建一个 created 钩子，它会在创建组件时获取所有定价详细信息 -

   created () {
       this.getPricing()
   },
   
   methods: {
       getPricing() {
           axios.get('api/pricing').then((response) => {
               //some actions
               router.push('prices');
           });
       },
   },
   

2. 使用 State，当用户点击按钮时，会获取定价详细信息并将其添加到状态中。你可以像这样在应用程序的任何地方使用状态 -

   this.$store.state.prices

让我知道它是否有效，否则我们会为您找到其他解决方案！