如何在vue js中使用props更新子組件的屬性？

Question

我在foodList組件（父代）上有一個addToCart組件（子代）。 還有另一個零件車。 每當我要清空購物車時，我都希望將addToCart組件的計數器值重置為0。

應用程序

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>

添加到購物車

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

在app.vue中，我將reset屬性修改為“ true”，然后將其傳遞給foodList.vue，然后將其傳遞給addToCart.vue。

在addToCart.vue中，我正在檢查reset prop是否為true，然后將計數器設置為0；否則，將計數器設置為0。

但這不起作用。讓我知道我在哪里失蹤？

請參考此鏈接以獲取完整的代碼。

食品訂購應用程序

Answer 1

因此，基本上，您希望將state傳遞給多個組件。 有多種方法可以實現此目的。 這是我推薦的三個。

集中式國家管理

為了更輕松地處理states ，您可以使用像vuex這樣的集中式狀態管理工具： https : //github.com/vuejs/vuex

這就是我的建議，特別是在涉及較大的應用程序時，需要在多個組件級別上傳遞狀態。 相信我，這使您的生活更加輕松。

屬性綁定

與子組件進行通信的最基本方法是屬性綁定。 但是特別是在涉及多層次通信時，可能會變得很混亂。

在這種情況下，您只需向兩個子組件props數組添加counter ，如下所示：

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>

最后，您可以在根組件的data對象中指定counter ，然后在發生特定event對其進行修改。 該state將被傳遞。

應用程序

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

活動巴士

第三種選擇是，您可以使用Vue的事件總線。 這是我個人為應用程序選擇的選項，這些應用程序因簡單的屬性綁定而變得混亂不堪，但仍然太小而無法使我們Centralized State management 。

首先，創建一個名為event-bus.js的文件，然后向其中添加以下代碼：

import Vue from 'vue';
export const EventBus = new 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/