Vue JS отправка данных между компонентами

Question

Vue JS отправка данных между компонентами

1

Я хотел бы знать, как я могу отправлять данные между двумя компонентами. Поэтому я хотел бы отправить другому компоненту динамическое значение, которое отображается на selectedBase.price, и отображаться на другом компоненте. Я пробовал с реквизитом, но не смог.

<v-layout row wrap primary-title v-for="base in bases" :key="base.id">
        <v-layout column>
            <v-flex xs6 offset-xs3>
                <v-avatar size="80px" class="grey lighten-1">
                    <img :src="base.href" :class="{selected: selectedBase.id == base.id}" @click="selectedBase = base" alt="avatar">
                </v-avatar>
            </v-flex>
        </v-layout>
        <v-layout column>
            <v-flex xs6 offset-xs4>
                <v-subheader>{{base.name}} {{base.price}}€ {{selectedBase.price}}</v-subheader>
            </v-flex>
        </v-layout>
    </v-layout>

<script>

export default {

    data() {
            return {
                selectedBase: {},
                bases: [{
                    id: 1,
                    name: "black",
                    price: 4,
                    href: "../../static/black.jpg"
                }, {
                    id: 2,
                    name: "white",
                    price: 6,
                    href: "../../static/white.jpg"
                }]
            }
        },
        computed: {

            totalBase: function() {
                var totalBase = 0;
                for (var i = 0; i < this.bases.length; i++) {
                    if (this.bases[i].selected) {
                        totalBase += this.bases[i].price;
                    }
                }
                return totalBase;
            }
        },
        methods: {
            getSelectedBase() {
                return this.selectedBase;
            }
        }
}

</script>

user8548238 07 сен. 2017, в 18:15

Источник

0

Вы МОЖЕТЕ обмениваться данными между компонентами практически ТОЛЬКО с реквизитом. Но рекомендуемый способ - использовать Vuex для общих данных.
user6748331 07 сен. 2017, в 16:18
0

хорошо спасибо. Не могли бы вы объяснить, почему в этом случае лучше использовать Vuex вместо реквизита? Я никогда не использовал Vuex, я не знаю, как это работает. Спасибо
user8548238 07 сен. 2017, в 16:21
0

Я могу написать для вас пример с "ванильным" Vue с подпорками, а второй с Vuex, но позже я сейчас занят. Вы можете подождать 1 час?
user6748331 07 сен. 2017, в 16:25
0

Из вопроса не понятно, какие компоненты задействованы. Не могли бы вы уточнить?
Bert 07 сен. 2017, в 16:27
0

@WaldemarIce да, конечно. Спасибо
user8548238 07 сен. 2017, в 16:28
0

Я здесь, пишу примеры ...
user6748331 07 сен. 2017, в 17:39
0

спасибо @WaldemarIce
user8548238 07 сен. 2017, в 18:19

Показать ещё 5 комментариев

Теги:

javascript

vue.js

vuejs2

vue-component

1 ответ

Ещё вопросы

Вы МОЖЕТЕ обмениваться данными между компонентами практически ТОЛЬКО с реквизитом. Но рекомендуемый способ - использовать Vuex для общих данных.
хорошо спасибо. Не могли бы вы объяснить, почему в этом случае лучше использовать Vuex вместо реквизита? Я никогда не использовал Vuex, я не знаю, как это работает. Спасибо
Я могу написать для вас пример с "ванильным" Vue с подпорками, а второй с Vuex, но позже я сейчас занят. Вы можете подождать 1 час?
Из вопроса не понятно, какие компоненты задействованы. Не могли бы вы уточнить?

Moisés Pio · Answer 1 · 2017-09-07T13-40-00.000Z

Да, props - это правильный путь.

ParentComponent.vue

<template>
    <your-component your-prop="123"></your-component>
</template>

<script>
    import YourComponent from '/path/to/YourComponent'

    export default {
        data() {
            return { }
        },
        components { YourComponent }
    }
</script>

ChildComponent.vue

<template>
    <div>My prop is: {{ yourProp }}</div>
</template>

<script>
    export default {
        data() {
            return { }
        },
        props: ['your-prop']
    }
</script>

Вы также можете использовать Vuex для совместного использования состояний между вашим приложением, но я думаю, что это не так.