Question

我正在尝试在VueJS中制作没有后端的迷你商店应用程序，仅将项目添加到购物车中。

我有组件One（Nmdgrey.vue），例如靴子和“添加到购物车”按钮。

<button @click="addToCart">Add to cart</button>

在第一个组件中起作用：

methods: {
addToCart() {
  const boots = { name: 'adidas nmd' };
  this.cart.push(boots);

  }
}

我有第二部分，我有购物车

<div v-for="item in cart">
  {{item.name}}
</div>

还有JS

import Nmdgrey from '@/components/Nmdgrey.vue';
export default {
  name: 'Shoppingcart',
  components: 
    Nmdgrey,
  data() {
    return {
      cart: [
        { name: 'adidas adizero' },
      ]
    }
  },
 };

我如何从组件一添加引导到组件二中的列表？

我在组件1中有this.cart.push(boots);，但没有用

这是我想要的，但是按钮不起作用：codesandbox

Answer 1

当子组件需要与父组件通信时，请使用$ emit。

请参考官方文档：Listening-to-Child-Components-Events

Nmdgrey.vue

<template>
  <div>
    <!-- component 1 -->
    <button @click="add">Add to cart</button>
  </div>
</template>

<script>
export default {
  name: "Numdgrey",
  methods: {
    add() {
      const boots = { name: "adidas nmd" };
      this.$emit("add", boots);
    }
  }
};
</script>

Shoppingcart.vue

<template>
  <div>
    <!-- component 2 -->
    <nmdgrey @add="addCart"></nmdgrey>
    <br>
    <div v-for="(item, index) in cart" :key="index">{{item.name}}</div>
  </div>
</template>

<script>
import Nmdgrey from "./Nmdgrey.vue";
export default {
  name: "ShoppingCart",
  components: {
    Nmdgrey
  },
  data() {
    return {
      cart: [{ name: "adidas adizero" }]
    };
  },
  methods: {
    addCart(good) {
      this.cart.push(good);
    }
  }
};
</script>

Codesandbox演示：https://codesandbox.io/s/z2qz6oy8yp

Answer 2

您需要创建一个post方法，您可以在此方法中将所需的所有内容从一页转移到另一页。之后，所有内容都将放入购物车，您将可以创建页面。

Answer 3

Codesandbox演示：https://codesandbox.io/s/94l44j8j14

使用props将值传递到购物车组件。

Nmdgrey.vue

<template>
<div>
  <b>Component 1 : NmdGrey</b><br><br>
<button v-for="(product, index) in boots" :key="index"
@click="addToCart(product.name)" >Add {{product.name}} to Cart</button>
<br><br><hr><br> 
  <shoppingcart :cart="cart" />
  </div>
</template>

<script>
import shoppingcart from './shoppingcart.vue';
export default {
name: 'Nmdgrey',
components:{shoppingcart},
data() {
    return {
      boots:[{name: 'adidas adizero'}, {name: 'puma walker'}, {name: 'nike shoe'}, {name: 'adidas plain'}],
      cart:[],
    }
  },
  methods: {
addToCart(boots) {
  this.cart.push({ name: boots });

  }
} 

}
</script>

Shoppingcart.vue

<template>
  <div>
    <b>Component 2 : Shopping cart</b>
    <br>
    <br>
    <div v-for="(product, index) in cart" :key="index">{{product.name}}</div>
  </div>
</template>

<script>
export default {
  name: "Shoppingcart",
  props: ["cart"],
  data() {
    return {};
  }
};
</script>

Answer 4

好吧，如果您的应用程序很小，则可以为Vue mixins创建addToCart并在需要时随时调用它。

类似于方法，您可以使用mixins在各个组件之间共享数据。

这是mixins官方docs

这是工作中的JsFiddle

希望这会有所帮助！

Answer 5

从您的帖子中我推断出，您想要做的是共享来自两个或多个Vue组件的数据。为此，您可以使用Vuex，它提供集中的状态管理。

这样，您可以使用vuex变异将商品添加到购物车，该商品可以在任何组件中使用。您还可以使用vuex getter从其中任何一个中检索购物车数据。

如何将javascript从组件导入到另一个组件？

5 个答案: