Question

我在foodList组件（parent）上有一个addToCart组件（child）。还有另一个组件Cart。我想在每次清空购物车时将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中

我将重置属性修改为＆＃34; true＆＃34;然后将其传递给foodList.vue，然后将其传递给addToCart.vue。

在addToCart.vue中，我检查reset prop是否为true，然后将计数器设置为0;

但这不起作用。我知道我在哪里错过了吗？

请参阅此链接以获取完整代码。

food ordering app

Answer 1

所以基本上你想把state传递给多个组件。有多种方法可以实现这一目标。这些是我推荐的三个。

集中国家管理

为了更轻松地处理states，您可以使用像vuex这样的集中状态管理工具：https://github.com/vuejs/vuex

这就是我的建议，尤其是涉及更大的应用程序时，您需要将状态传递给多个组件级别。相信我，这会让你的生活变得更轻松。

属性绑定

与子组件通信的最基本方法是属性绑定。但特别是在涉及多层次沟通时，它可能会非常混乱。

在这种情况下，您只需将counter添加到两个子组件props数组中，如下所示：

foodList.vue（1。Level Child Component）

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
  }
}

活动巴士

作为第三种选择，您可以使用Vue的事件总线。这是我个人为应用程序选择的选项，它通过简单的属性绑定变得太乱，但仍然太小而无法使我们成为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/

如何使用vue js中的props更新子组件的属性？

1 个答案:

集中国家管理

属性绑定

活动巴士