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

我正在尝试在VueJS中使用迷你商店应用程序，不使用后端，只向购物车添加商品

我有一个mdgrey.vue组件，其中有靴子和“添加到购物车”按钮

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

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

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

如何将引导从组件1添加到组件2中的列表

我有这个手推车；在第一部分，但它不起作用

---

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

您需要创建一个post方法，在该方法中，您可以接管从一个页面到另一个页面所需的所有内容。之后，所有内容都将进入购物车，您将能够创建您的页面。

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

Codesandbox演示：

使用道具将值传递给购物车组件

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>

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

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

代码沙盒演示：

使用道具将值传递给购物车组件

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>

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

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

---

好的，如果您的应用程序很小，那么您可以为addToCart创建Vue mixin，并在组件中需要时随时调用它

与这些方法类似，您可以使用mixin跨组件共享数据

这是mixins官方网站

这是工作票

---

希望这有帮助

如果您的应用程序很小，那么您可以为addToCart创建Vue mixin，并在组件中需要时调用它

与这些方法类似，您可以使用mixin跨组件共享数据

这是mixins官方网站

这是工作票

---

希望这有帮助

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

参考官方文件：

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>

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

<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演示：

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

参考官方文件：

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>

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

<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演示：

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

---

通过这种方式，您可以使用vuex变异将项目添加到购物车中，这可以从任何组件使用。您还可以使用vuex Getter从其中任何一个组件检索购物车数据。

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

---

通过这种方式，您可以使用vuex变异将项目添加到购物车中，这可以从任何组件使用。您还可以使用vuex getters从其中任何一个检索购物车数据。

该“添加到购物车”按钮是您的整个部分？该“添加到购物车”按钮是您的整个部分？嗯，这里有一个小错误，因为Nmdgrey.vue组件是具有阿迪达斯NMD图像的组件，而按钮添加到购物车，我有5个组件，比如Nmdgrey5类型的靴子，所有组件都有“添加到购物车”按钮，购物车是另一个页面路线您不需要5个组件。使用单个组件，将所有产品放在一个数组中，并使用v-for列出它们。用户选择添加到购物车后，例如，用户选择3个引导。然后有一个按钮转到购物车。当用户点击该按钮时，使用此按钮更改路径。$router。点击“shoppingcartroute”并转到购物车页面。我有5个组件，因为我使用了幻灯片。如果可能，请将代码上载到codesandbox，然后我可以提供帮助。即使使用滑块，也不需要为相同类型的产品提供5个组件。只需v-for就足够了代码sandbox.io/s/v616j13rx0按钮不要按itemsHmm，这里有一点小错误，因为Nmdgrey.vue组件是具有阿迪达斯NMD图像的组件，按钮添加到购物车中，我有5个组件，如Nmdgrey5类型的靴子，所有组件都有添加到购物车按钮，购物车是另一个页面，你不需要5个组件。使用单个组件，将所有产品放在一个数组中，并使用v-for列出它们。用户选择添加到购物车后，例如，用户选择3个引导。然后有一个按钮转到购物车。当用户点击该按钮时，使用此按钮更改路径。$router。点击“shoppingcartroute”并转到购物车页面。我有5个组件，因为我使用了幻灯片。如果可能，请将代码上载到codesandbox，然后我可以提供帮助。即使使用滑块，也不需要为相同类型的产品提供5个组件。只要v-for就足够了代码sandbox.io/s/v616j13rx0按钮不要按项目扫描你能给我一些提示吗？这很简单，但你可以向我解释more@porithe我在main.js上添加了一个简单的Vuex存储，定义了保存购物车数据的状态、所述数据的变异以及检索数据的getter。OneComp使用变异来修改状态，而TwoComp通过getter检索数据

---

. 这家商店的结构很简陋，你可能想改进一下。你能给我一些建议吗？这很简单，但你可以向我解释more@porithe我在main.js上添加了一个简单的Vuex存储，定义了保存购物车数据的状态、所述数据的变异以及检索数据的getter。OneComp使用变异来修改状态，而TwoComp通过getter检索数据。这家商店的结构非常简陋，你可能想改进一下。