如何將javascript從組件導入另一個組件？

Question

我正在嘗試在沒有后端的 VueJS 中做迷你商店應用程序，只將商品添加到購物車。

我有一個組件（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' },
      ]
    }
  },
 };

如何將組件一的靴子添加到組件二的列表中？

我有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>

購物車.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>

購物車.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

好吧，如果您的應用程序很小，那么您可以為addToCart創建Vue mixins ，並在組件中需要時調用它。

與這些方法類似，您可以使用mixins在組件之間共享數據。

這是mixins官方文檔

這是工作的JsFiddle

希望這可以幫助！

Answer 5

從您的帖子中，我推斷您想要做的是共享來自兩個或多個 Vue 組件的數據。 為此，您可以使用提供集中狀態管理的Vuex 。

通過這種方式，您可以使用 vuex 突變將商品添加到購物車，可以從任何組件中使用。 您還可以使用 vuex getter 從其中任何一個中檢索購物車數據。