如何在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

这就是我的建议，特别是在涉及较大的应用程序时，需要在多个组件级别上传递状态。相信我，这使您的生活更加轻松。

属性绑定

与子组件进行通信的最基本方法是属性绑定。但是特别是在涉及多层次通信时，可能会变得很混乱。

在这种情况下，您只需将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将被传递下来。

应用程序

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/