0

Всем привет. Уже написал пару простых SPA на vue.js, активно его изучаю. Встал вопрос с использованием vue в простых сайтах.

Если быть точнее, то не понимаю, как из одного компонента передать событие в другой? К примеру, есть кнопка добавления товара, на клик по которой мне необходимо вызывать метод addProduct в компоненте Cart. Как правильно это сделать?

//main.js: 

import Vue from 'vue'
import Cart from './components/Cart.vue'       
const app = new Vue({
    el: '#app',
    components: {ExampleComponent}
});

HTML:

<div id="app">      
    <cart></cart>
</div>

Cart.vue:

<template>
    <div id="cart">

    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                items: []
            }
        },
        methods: {
            addProduct: function (id) {
                //console.log('Adding product ' + id)
            },
            reduceProduct: function (id) {
                //console.log('Reducing product ' + id)
            },
            removeProduct: function (id) {
                //console.log('Removing product ' + id)
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
2
  • Здравствуйте. Пересылать данные снизу вверх возможно через события (ru.vuejs.org/v2/guide/…) . Сверху вниз данные передаются через свойства компонентов. 15 мая 2018 в 11:56
  • Проще всего использовать Vuex. vuex.vuejs.org/ru/getters.html 20 мая 2018 в 9:18

1 ответ 1

2

Для компонентов, которые не обязательно состоят в отношениях родитель-ребёнок есть несколько вариантов:

  • Указание атрибута ref и обращение напрямую (по-моему очень плохой вариант - использовать если приложение максимально простое) - ссылка
  • Использование шины событий - создаётся отдельный инстанс Vue, куда вы и отправляете все события из одного компонента, и слушаете их на другом компоненте (нормальный вариант для маленьких и средних приложений, но судя по тому, что данный способ пропал из официальной документации - теперь считается плохим путём) - ссылка
  • Использование библиотеки управления состоянием - для Vue родная библиотека Vuex (стоит использовать для средних и больших приложений) - ссылка

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.