Как обновить свойство дочернего компонента с помощью реквизита в VUE JS?

Question

У меня есть компонент addToCart (дочерний) для компонента foodList (родительский).и есть еще один компонент корзины.Я хочу сбросить значение счетчика компонента addToCart на 0 всякий раз, когда я опорожню свою корзину.

App.vue

data() {
  return {
    msg: "Welcome to Your Food Ordering App",
    foodData:[],
    cart:[],
    reset:false
 };
},
methods: {
  emptyCart:function(){
    this.reset = true;
    this.cart = [];
  }
}

foodList.vue

export default {
  props:['foods','reset'],
  data() {
    return {

    };
  }
}

<addToCart :reset="reset"></addToCart>

addToCart

export default {
  props:['food','reset'],
  data(){
    return {
      counter:0
    }
  },
  beforeMount() {
    if(this.reset) {
      this.counter = 0;
    }
  }

в app.vue Я изменяю свойство сброса на «true» и затем передаю его в foodList.vue,затем передавая его в addToCart.vue.

В addToCart.vue я проверяю, является ли сброс упорным, тогда установите счетчик в 0;

Но это не работает. Позвольте мне знать, гдемне не хватает?

Пожалуйста, обратитесь к этой ссылке для получения полного кода.

приложение для заказа еды

Answer 1

Таким образом, вы хотите передать state по нескольким компонентам.Есть несколько способов достичь этого.Вот три моих рекомендованных.

Централизованное управление состояниями

Чтобы упростить обработку states, вы можете использовать инструмент централизованного управления состояниями, такой как vuex: https://github.com/vuejs/vuex

Это то, что я рекомендую вам, особенно когда речь идет о больших приложениях, где вам нужно передать состояние по нескольким уровням компонентов.Поверьте мне, это делает вашу жизнь намного проще.

Привязка свойств

Самый простой способ связи с вашими дочерними компонентами - это привязка свойств.Но особенно когда речь идет о многоуровневом обмене данными, он может быть довольно запутанным.

В этом случае вы просто добавите counter к обоим вашим дочерним компонентам props массив, например:

foodList.vue (1. Дочерний компонент уровня)

export default {
  props:['foods','reset', 'counter'],
  // ... your stuff
}

И включите компонент следующим образом:

<foodList :counter="counter"></foodList>

addToCart.vue (2. Уровень дочернего компонента)

export default {
  props:['food','reset', 'counter'],
  // ... your stuff
}

И, наконец, включите компонент следующим образом:

<addToCart :reset="reset" :counter="counter"></addToCart>

В качестве последнего шага вы можете указать counter в data объект вашего корневого компонента, а затем измените его на определенный event.state будет передано вниз.

App.vue

data() {
  return {
    // ... your stuff
    counter: 0,
 };
},
methods: {
  emptyCart:function(){
    // ... your stuff
    this.counter = 0; // reset the counter from your parent component
  }
}

Шина событий

В качестве третьего варианта вы можете использоватьиз событий событий автобус.Это вариант, который я лично выбираю для приложений, которые слишком запутаны в простой привязке свойств, но все еще слишком малы, чтобы мы могли Centralized State management.

Для начала создайте файл с именем event-bus.jsи затем добавьте в него следующий код:

import Vue from 'vue';
export const EventBus = new Vue();

Теперь вы можете просто запускать события из родительского компонента, например:

App.vue

import { EventBus } from './event-bus.js'; // check the path
export default {
  // ... your stuff
  methods: {
    emptyCart:function(){
      // ... your stuff
      EventBus.$emit('counter-changed', 0); // trigger counter-changed event
    }
  }
}

А затем прослушайте событие counter-changed в вашем дочернем компоненте.

addToCart.vue

import { EventBus } from './event-bus.js';
export default {
  // ... your stuff
  created() {
    EventBus.$on('counter-changed', newCounter => {
      this.counter = newCounter;
    });
  }
 }

Подробнее оШина событий: https://alligator.io/vuejs/global-event-bus/